vue项目完成的最后一步就是打包部署上线,但是打包部署的过程往往不是那么一帆风顺的,现将遇到问题和解决方案记录如下。
图片路径问题
起因:
页面中引入资源的方式往往有如下几种
* HTML标签中直接引入图片, 如 <img src="../assets/images/index.png">
* JS代码中定义资源路径属性,如src: require('../assets/images/index.png')
* CSS代码中定义资源为背景图片,如background-image: url("../assets/images/indexpng")
上述三种资源加载方式还是有所区别的。
前两种无论图片大小,都会使用url-loader加载器将其转化为base64编码的静态资源,而第三种方式则会根据webpack中配置的limit参数,动态选择符合大小要求的图片进行转码,此时则会导致不符合大小选择的图片加载失败,同时报出如下错误。localhost:8080/dist/static/css/static/img/index.254207f.png
解决:
1.保证打包资源路径可用,首先要做的是配置build.js执行时的资源参数,打开config目录下的index.js
看代码:
index: path.resolve(__dirname, '../dist/index.html'),assetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',assetsPublicPath: './', // 修改为'./'满足资源相对路径
2.保证资源转码条件符合。这块主要涉及到加载用到的加载器url-loader, 需要保证其配置可执行。打开build目录下的webpack.base.conf.js
看代码:
{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: 'url-loader',options: {limit: 10000, // 该限制为小于10KB的图片,系统默认转码为base64name: utils.assetsPath('img/[name].[hash:7].[ext]')}
},
依赖资源路径问题(字体、图标)
起因:
系统采用vue + elementUI,但是发现打包之后的字体文件和图标都不能正常显示,报错如下:
解决:
打开build目录下utils.js,添加路径配置 publicPath: '../../'
,
看代码:
// Extract CSS when that option is specified
// (which is the case during production build)if (options.extract) {return ExtractTextPlugin.extract({use: loaders,fallback: 'vue-style-loader',publicPath: '../../' // 解决element UI打包后字体文件丢失})} else {return ['vue-style-loader'].concat(loaders)}
}
以上内容,全为个人拙见,如有错误,还望指正。
感谢博文:
https://blog.csdn.net/qq_38543537/article/details/90755830
https://segmentfault.com/q/1010000015012074