vue-cli的项目开发完成后,发布前将进行打包工作,项目文件夹执行npm run build将vue框架编写的程序转换为最基础的html,css,js等。转换过程中本人遇到了一些问题,整理记录下:
-
生成文件的引号被省略问题:
设置build/webpack.prod.conf.js的属性removeAttributeQuote:false
-
html引用路径为绝对路径问题:
修改config/index.js中的build:{}里面assestsPublicPath为assetsPublicPath:’./'
-
包含外网地址问题:
将项目中的外部引用方式修改为本地引用方式
-
生成文件被压缩问题:
注释掉build/webpack.prod.conf.js的 new UglifyJsPlugin()去除生成js的压缩效果;
注释掉build/webpack.prod.conf.js的new OptimizeCSSPlugin()去除生成css的压缩效果;
修改build/webpack.prod.conf.js的new HtmlWebpackPlugin()中minify:false去除html的压缩
-
生成文件加入时间戳:
在build/webpack.prod.conf.js中创建
var date= new Date(); const Version=date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+"_"+date.getHours()+"-"+date.getMinutes()+"-"+date.getSeconds();
并在output:{}的fileName中进行拼接:
filename: utils.assetsPath(‘js/[name].[chunkhash].’+Version+’.js’),
chunkFilename: utils.assetsPath(‘js/[id].[chunkhash].’+Version+’.js’)