vue中打包后相对路径的常见问题怎样解决-群英

上一篇：vue项目中css相对路径导入要注意哪些下一篇：vue中data引入相对路径会有什么问题,怎样解决

在这篇文章中，我们来学习一下“vue中打包后相对路径的常见问题怎样解决”的相关知识，下文有详细的讲解，易于大家学习和理解，有需要的朋友可以借鉴参考，下面就请大家跟着小编的思路一起来学习一下吧。

vue打包部署后，访问是需要加上项目名

这时候访问是使用绝对路径就会处问题了。

把引用路径改为相对路径

打开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中打包后相对路径的常见问题怎样解决的内容应该都有一定的认识了吧，希望这篇能对大家有所帮助。最后，想要了解更多，欢迎关注群英网络，群英网络将为大家推送更多相关的文章。

标签：打包后相对路径

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：vue项目中css相对路径导入要注意哪些下一篇：vue中data引入相对路径会有什么问题,怎样解决