最近在搞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模式,设置相对路由,打包后的静态