最近在搞Vue CLI的项目打包，出现了常见的路径问题，经过研究问题和文档，现在有了自己的看法，以下所有内容都是建立在Vue CLI3之上。
关于vue.config.js文件：
这个文件的配置主要是用来设置打包的文件相关信息的命令：npm run build，而调试模式npm run serve，只不过是是对build到内存后，再次启动到node服务器。
在调试模式下，这个文件的更新并不会因为ctrl+s保存而从新读取，只有重启服务才能生效。
vue.config.js的详细配置信息请查看文档。
关于预览打包
这个问题一般都是仅仅需要你更改下vue.config.js中的publicPath设置，改为publicPath: "./"，把路径改为相对路径。
Hash模式路由的配置
在这种情况下，一般只需要操作上面的路径更改就可以了。
HIstory模式路由的配置
先引用一段文档里的话：
相对 publicPath 的限制
相对路径的 publicPath 有一些使用上的限制。在以下情况下，应当避免使用相对 publicPath:
当使用基于 HTML5 history.pushState 的路由时；
在启用HTML5的History模式时，不应该把publicPath改为相对路由，这样请求的js和css文件会出错。
image.png
这是因为在使用嵌套路由后又使用了History模式，设置相对路由，打包后的静态文件也是以相对路径引入，所以会在前面加上去
index这个当前路径的父路由。会因获取不到js文件而出错。因此文档建议使用绝对路径。
在不使用嵌套路由时，按照前文的介绍配置是没有问题的，在嵌套路由的时候必须使用绝对路径。
关于其他路径问题
我们在Vue开发中常常使用一个vue-lazyload来处理懒加载图片，这个图片的路径问题也是需要考虑的。
image.png
同样默认使用相对路径，导致出现前文所说的问题。
使用绝对路径后问题解决。
image.png
再次阅读文档后发现，给出的DEMO也是绝对路径（看文档不仔细😂）。
其他闲话
这个项目最开始是使用的Hash模式路由，修改publicPath为相对后就解决了问题。但是为了提高用户体验，要缓存滚动条位置，所以不得不使用History模式路由，所以一出现了一系列问题😭。
网友评论