vue项目打包publicpath_Vue项目打包路径问题

最近在搞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模式路由,所以一出现了一系列问题😭。

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页

打赏作者

weixin_39915700

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值