Vue 打包后相对路径的引用问题


Posted in Vue.js onJune 05, 2022

打包后相对路径的引用

vue打包部署后,访问是需要加上项目名Vue 打包后相对路径的引用问题

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

解决办法

把引用路径改为相对路径

解决JS、CSS等资源

打开build文件夹下的webpack.prod.conf.js,找到output,添加“ publicPath: ‘./’,”即可

Vue 打包后相对路径的引用问题

或者打开config文件夹下的index.js,找到build,修改“assetsPublicPath: ‘./’”即可

Vue 打包后相对路径的引用问题

解决图片的引用问题

打开build文件夹下的utils.js,如下修改即可

Vue 打包后相对路径的引用问题

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个点的时候,反而能行,不知道为啥。

Vue 打包后相对路径的引用问题

publicPath: process.env.NODE_ENV === 'production' ? '././' : '/'

最后改成这个样子居然可以了。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持三水点靠木。


Tags in this post...

Vue.js 相关文章推荐
Vue项目利用axios请求接口下载excel
Nov 17 Vue.js
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
vue单元格多列合并的实现
Nov 26 Vue.js
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
vue 递归组件的简单使用示例
Jan 14 Vue.js
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
Vue图片裁剪组件实例代码
Jul 02 Vue.js
Vue3中的Refs和Ref详情
Nov 11 Vue.js
vue实现在data里引入相对路径
Jun 05 #Vue.js
ant design vue的form表单取值方法
Jun 01 #Vue.js
vue ant design 封装弹窗表单的使用
Jun 01 #Vue.js
vue实现登陆页面开发实践
May 30 #Vue.js
vue router 动态路由清除方式
May 25 #Vue.js
vue如何清除浏览器历史栈
May 25 #Vue.js
vue3不同环境下实现配置代理
May 25 #Vue.js
You might like
一个简洁的多级别论坛
2006/10/09 PHP
编写安全 PHP应用程序的七个习惯深入分析
2013/06/08 PHP
Yii2实现中国省市区三级联动实例
2017/02/08 PHP
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
2020/08/03 PHP
你真的了解JavaScript吗?
2007/02/24 Javascript
23个超流行的jQuery相册插件整理分享
2011/04/25 Javascript
自动最大化窗口的Javascript代码
2013/05/22 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
jQuery响应enter键的实现思路
2014/04/18 Javascript
javascript+canvas实现刮刮卡抽奖效果
2015/07/29 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
微信小程序 简单教程实例详解
2017/01/13 Javascript
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
2020/01/18 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
[58:57]2018DOTA2亚洲邀请赛3月29日小组赛B组 Effect VS VGJ.T
2018/03/30 DOTA
python解决字典中的值是列表问题的方法
2013/03/04 Python
Python 基础教程之闭包的使用方法
2017/09/29 Python
Python探索之创建二叉树
2017/10/25 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
python Matplotlib模块的使用
2020/09/16 Python
python中lower函数实现方法及用法讲解
2020/12/23 Python
IE9下html5初试小刀
2010/09/21 HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
2019/07/29 HTML / CSS
教师申诉制度
2014/01/29 职场文书
2014学雷锋活动总结
2014/03/09 职场文书
茶楼服务员岗位职责
2015/02/09 职场文书
事业单位个人总结
2015/02/12 职场文书
莫言获奖感言(全文)
2015/07/31 职场文书
团队拓展训练感想
2015/08/07 职场文书
幼儿园大班教师评语
2019/06/21 职场文书
个人落户申请书怎么写?
2019/06/28 职场文书
如何判断pytorch是否支持GPU加速
2021/06/01 Python
Spring Boot 底层原理基础深度解析
2022/04/03 Java/Android
java版 联机五子棋游戏
2022/05/04 Java/Android