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

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

猜你喜欢

• WebWorker封装JS沙箱怎样操作，WebWorker沙箱好处有啥

  这篇文章主要介绍了WebWorker 封装 JavaScript 沙箱，在前文 quickjs 封装 JavaScript 沙箱详情 已经基于 quickjs 实现了一个沙箱，今天这篇文章再基于 web worker 实现备用方案,需要的朋友可以参考一下

• 用vue怎样编写一个能控制跑马灯的组件

  本文实例为大家分享了vue开发实现跑马灯效果组件的具体代码，供大家参考，具体内容如下用vue编写一个可以快进后退的跑马灯组件由于业务需求，要实现一个会可以控制速度的跑马灯，初开始用js的setinterval每隔几毫秒来减取一个字符拼接到后面，效果不理想就放弃了。后查询用js的animate这个api改造大功告成！效果

• JavaScript命令模式怎样理解？

  这篇文章主要介绍命令模式的内容，JavaScript设计模式有很多种类型，命令模式是JavaScript设计模式中行为型的一种设计模式，下面有详细的介绍和实例，对新手学习和理解JavaScript设计模式有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章能有所收获。

• React并发功能具体怎么应用，能解决什么问题

  React 是由 Facebook 软件工程师 Jordan Walke 创建，React 的第一个版本在七年前问世，现在，Facebook 负责维护,本文给大家介绍React 并发功能体验前端并发模式的问题，感兴趣的朋友跟随小编一起看看吧

• JavaScript构造函数用来做什么？详解构造函数的执行过程

  今天我们来了解关于JavaScript构造函数的内容，下文会介绍构造函数是什么，构造函数用来做什么，构造函数的执行过程和构造函数的返回值这些，对新手学习和理解JavaScript构造函数有一定的帮助，需要的朋友可以参考。