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 + el-form 实现的多层循环表单验证
Nov 25 Vue.js
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
解读Vue组件注册方式
May 15 Vue.js
vue 实现上传组件
May 31 Vue.js
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
vue的项目如何打包上线
Apr 13 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
php 魔术方法详解
2014/11/11 PHP
PHP连接操作access数据库实例
2015/03/30 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
完美解决Thinkphp3.2中插入相同数据的问题
2017/08/01 PHP
YII框架常用技巧总结
2019/04/27 PHP
利用JQuery为搜索栏增加tag提示
2009/06/22 Javascript
纯JavaScript实现的完美渐变弹出层效果代码
2010/04/02 Javascript
javascript 函数及作用域总结介绍
2013/11/12 Javascript
js动态修改input输入框的type属性(实现方法解析)
2013/11/13 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
简单封装js的dom查询实例代码
2016/07/08 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
ES6记录异步函数的执行时间详解
2016/08/31 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
vue省市区三联动下拉选择组件的实现
2017/04/28 Javascript
浅谈微信小程序flex布局基础
2018/09/10 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
详解Vue CLI 3.0脚手架如何mock数据
2018/11/23 Javascript
nodejs分离html文件里面的js和css的方法
2019/04/09 NodeJs
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
VUE路由动态加载实例代码讲解
2019/08/26 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
python编程实现12306的一个小爬虫实例
2017/12/27 Python
用TensorFlow实现戴明回归算法的示例
2018/05/02 Python
pandas计数 value_counts()的使用
2019/06/24 Python
JACK & JONES瑞典官方网站:杰克琼斯欧式风格男装
2017/12/23 全球购物
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
生日派对邀请函
2014/01/13 职场文书
办公室秘书岗位职责范本
2014/02/11 职场文书
《维生素c的故事》教学反思
2014/02/18 职场文书
分家协议书
2014/04/21 职场文书
个人简历自荐信
2014/06/26 职场文书
医生爱岗敬业演讲稿
2014/08/26 职场文书
采购员工作总结范文
2015/08/12 职场文书
《敬重卑微》读后感3篇
2019/11/26 职场文书
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android