vue项目部署前打包

vue项目打包上线之前要进行相应的配置,否则会存在路径找不到,页面出现空白的问题,现在做一下记录

1、打包成功没有报错,但是打开页面显示空白

解决:文件位置:config目录下index.js文件更改assetsPublicPath属性:文件里面有两个assetsPublicPath属性,也就是更改build里面的assetsPublicPath属性:(加上点)

assetsPublicPath:'/'替换成assetsPublicPath:'./'

2、打包成功没有报错,但是打开页面ico图标不显示

解决:文件位置:build目录下utils.js文件中fallback后边添加publicPath: '../../'

if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
})
} else {
return ['vue-style-loader'].concat(loaders)
}

3、打包完成后某些图片没加载出来,f12提示404,且dist文件下的static文件夹下有一个img文件夹

原因:图片过大或者资源文件过大、超过了打包规定的限制;

解决:修改build目录下面的webpack.base.conf.js文件下的limit限制,超过你使用到的最大图片资源即可。

4、打包后运行项目:刷新界面会出现404

解决:router目录下的index.js文件,mode: 'history',//将这个模式关闭就好

5、运行npm run build就会生成dist文件夹,也就是打包好的文件

(本人目前只遇到上述三种情况,如遇其他情况,请参考https://blog.csdn.net/weixin_42103706/article/details/100319474?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param,感谢分享)

你可能感兴趣的:(vue项目部署前打包)