Vue 打包后相对路径的引用问题
更新时间：2022年06月05日 09:09:03 作者：Woniu_Yu
这篇文章主要介绍了VUE 打包后相对路径的引用问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
打包后相对路径的引用
vue打包部署后，访问是需要加上项目名
这时候访问是使用绝对路径就会处问题了。
解决办法
把引用路径改为相对路径
解决JS、CSS等资源
打开build文件夹下的webpack.prod.conf.js，找到output，添加“ publicPath: ‘./’,”即可
或者打开config文件夹下的index.js，找到build，修改“assetsPublicPath: ‘./’”即可
解决图片的引用问题
打开build文件夹下的utils.js，如下修改即可
vue cli打包相对路径遇到的坑
<script src="/js/index.67b1c383.js"></script>
这个是vue打包之后的绝对路径，但是想要的是：
<script src="./js/index.67b1c383.js"></script>
这种相对路径
网上说的，大部分解决方案是修改publicPath: './', ，但是实际测试之后，还是有很大的问题
第一种打包设置：publicPath: './', 结果：<script src="js/chunk-vendors.dbdd0915.js"> 还是相对路径
第一种打包设置：publicPath: '', 结果：<script src="js/chunk-vendors.dbdd0915.js"> 也是相对路径
第一种打包设置：publicPath: '../', 结果：<script src="../js/chunk-vendors.dbdd0915.js"> 这个就非常神奇了，一个点的时候不行，2个点的时候，反而能行，不知道为啥。
publicPath: process.env.NODE_ENV === 'production' ? '././' : '/'
最后改成这个样子居然可以了。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue.js的vue-cli脚手架中使用百度地图API的实例
今天小编就为大家分享一篇关于vue.js的vue-cli脚手架中使用百度地图API的实例，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
这篇文章主要介绍了解决element-ui的下拉框有值却无法选中的情况，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
element-ui中el-row中设置:gutter间隔不生效问题
这篇文章主要介绍了element-ui中el-row中设置:gutter间隔不生效问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
今天小编大家分享一篇Vue监听滚动实现锚点定位(双向)示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要给大家介绍了关于Vue.js中该如何自己维护路由跳转记录的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue.js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-05-05
这篇文章主要为大家介绍了Vue3之使用js实现动画示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
Vue3之Vite中由element ui更新导致的启动报错解决
这篇文章主要介绍了Vue3之Vite中由element ui更新导致的启动报错解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
本文主要介绍了vue数据绑定的相关知识，具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要介绍了vue props数据传递类型限制方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
本文主要还是针对 Vue.js 2.x 版本，毕竟接下来一段时间，Vue.js 2.x 还是我们工作中的主流版本，对vue.js性能优化技巧相关知识感兴趣的朋友一起看看吧2021-09-09
最新评论