【转】关于Vue打包的一个要注意的地方
https://www.jianshu.com/p/4118e76d684a
我们用vue-cli(脚手架)自动生成项目,然后用webpack来打包,往往会遇到这种问题:
1、直接根据README.md里面的npm run build打包
2、打包后的文件在dist目录里面
![](https://upload-images.jianshu.io/upload_images/11120234-cc9ed85a092790f1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/168/format/webp)
dist
3、往往这个时候我们都会想到在本地用服务器打开来看看代码是否正常显示看看打包有么什么问题,例如路径是这样的http://127.0.0.1:5500/dist/index.html;然后页面打开是空白的,打开控制台查看发现代码报错404;或者是文件类型不对的报错例如:
![](https://upload-images.jianshu.io/upload_images/11120234-36de56737db6e043.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
报错
4、仔细看下报错其实发现是是路径问题
![](https://upload-images.jianshu.io/upload_images/11120234-3e04b24015a7c210.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/743/format/webp)
路径问题
5、那么这里打包配置需要修改了;
![](https://upload-images.jianshu.io/upload_images/11120234-e9a6aa7beed6fa04.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/922/format/webp)
配置修改
在assetsPublicPath:"/"的反斜杠前面加一个点;然后在打包,代码就不会报错了;
6、这里这样打包的文件就有一个问题了,如果代码是放在服务器上的话比如我放在http://www.cmihee.wang/域名下的话它又会报错和第3步一样,还是打包引用的文件路径不对;这个时候我们就要assetsPublicPath:"./"里面的点去掉,然后打包丢在服务器上
以上就是打包需要注意的地方