解决vue单页面应用打包后相对路径、绝对路径相关问题


Posted in Javascript onAugust 14, 2020

在项目开发过程中,在部署过程中,用到了反向代理,这就要求前端代码中不能使用绝对路径。但是我们知道,一般情况下,通过webpack+vuecli默认打包后的HTML、css、js等文件,使用的都是绝对路径。下面可以举几个例子来看一下:

1、打包后的index.html文件

解决vue单页面应用打包后相对路径、绝对路径相关问题

2、打包后的css文件

解决vue单页面应用打包后相对路径、绝对路径相关问题

所以,如果在项目中需要使用相对路径来获取静态的资源文件,需要怎么做呢?

1、修改webpack配置文件中的assetsPublicPath,修改为如下图所示。

解决vue单页面应用打包后相对路径、绝对路径相关问题

修改配置后,进行打包发现,打包后的index.html文件中,对css等文件的调用,变成相对路径。

解决vue单页面应用打包后相对路径、绝对路径相关问题

但是同时我们也会的发现这样修改后,导致打包后的css文件中,图片的路径出现问题,如下所示,图片路径出错导致图片找不到。

解决vue单页面应用打包后相对路径、绝对路径相关问题

所以仍需进一步修改配置,使其变成如下路径:

.iradio_flat-yellow{background-image:url(../../static/img/yellow@2x.04850a2.png);

2、 处理图片路径问题

在webpack对ExtractTextPlugin插件配置的地方,加入如下代码(具体值可能有变化,依据自身项目打包后文件路径关系确定)

解决vue单页面应用打包后相对路径、绝对路径相关问题

再次打包,发现问题解决!

补充知识:Vue-cli 2打包静态文件夹static打包路径报错,开发中使用绝对路径,打包后部署到二级目录,绝对路径没用改变。

在开发中,如果使用绝对路径在运行测试环境是没用任何问题的

但是在打包后,路径是回安装原来写的路径完全不改变的搬过去。

那么在部署在二级目录下,读取根目录肯定会报错

解决办法:在开发中使用相对路径

主要文件

config->index.js

build->assetsPublicPath: '/二级目录/'

最后的斜线很重要不能省略

static静态文件

build->utils.js
exports.cssLoaders下的function generateLoaders
 if (options.extract) {
   return ExtractTextPlugin.extract({

里面添加publicPath: '/二级目录/'中间写二级路径地址,后面的也是斜线很重要,不能省略

以上这篇解决vue单页面应用打包后相对路径、绝对路径相关问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery对下拉框,单选框,多选框的操作
Feb 21 Javascript
JavaScript的代码编写格式规范指南
Dec 07 Javascript
jQuery实现查找链接文字替换属性的方法
Jun 27 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
Aug 06 Javascript
JS实现淡入淡出图片效果的方法分析
Dec 20 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
Apr 25 Javascript
Vue2.0用户权限控制解决方案
Nov 29 Javascript
vue中的计算属性的使用和vue实例的方法示例
Dec 04 Javascript
Node.js创建Web、TCP服务器
Dec 05 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
Dec 14 Javascript
js模拟F11页面全屏显示
Sep 17 Javascript
简单了解JavaScript sort方法
Nov 25 Javascript
vue调用本地摄像头实现拍照功能
Aug 14 #Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
Aug 14 #Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
Aug 14 #Javascript
Vue的Options用法说明
Aug 14 #Javascript
Vue 构造选项 - 进阶使用说明
Aug 14 #Javascript
vue 扩展现有组件的操作
Aug 14 #Javascript
如何HttpServletRequest文件对象并储存
Aug 14 #Javascript
You might like
PHP Smarty生成EXCEL文档的代码
2008/08/23 PHP
mysql数据库差异比较的PHP代码
2012/02/05 PHP
深入file_get_contents函数抓取内容失败的原因分析
2013/06/25 PHP
浅析php原型模式
2014/11/25 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
使用PHP开发留言板功能
2019/11/19 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
一个报数游戏js版(约瑟夫环问题)
2010/08/05 Javascript
基于Jquery的淡入淡出的特效基础练习
2010/12/13 Javascript
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
2011/10/22 Javascript
Textarea与懒惰渲染实现代码
2012/01/04 Javascript
js/jQuery简单实现选项卡功能
2014/01/02 Javascript
JQuery遍历json数组的3种方法
2014/11/08 Javascript
微信小程序之页面拦截器的示例代码
2017/09/07 Javascript
基于Swiper实现移动端页面图片轮播效果
2017/12/28 Javascript
vue中实现Monaco Editor自定义提示功能
2019/07/05 Javascript
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
Python正则表达式教程之一:基础篇
2017/03/02 Python
Python数据操作方法封装类实例
2017/06/23 Python
详解Python中的动态属性和特性
2018/04/07 Python
Python 判断文件或目录是否存在的实例代码
2018/07/19 Python
利用pandas将非数值数据转换成数值的方式
2019/12/18 Python
python ImageDraw类实现几何图形的绘制与文字的绘制
2020/02/26 Python
土耳其家居建材网站:Koçtaş
2016/11/22 全球购物
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
Melissa鞋英国官方网站:Nonnon
2019/05/01 全球购物
如何反序的迭代一个序列?how do I iterate over a sequence in reverse order
2012/02/04 面试题
J2EE中常用的名词进行解释
2015/11/09 面试题
销售心得体会
2014/01/02 职场文书
校园标语大全
2014/06/19 职场文书
2015年社区卫生工作总结
2015/04/21 职场文书
3招让你摆脱即兴讲话冷场尴尬
2019/08/08 职场文书
在JavaScript中如何使用宏详解
2021/05/06 Javascript
MySQL kill不掉线程的原因
2021/05/07 MySQL
源码分析Redis中 set 和 sorted set 的使用方法
2022/03/22 Redis
Android Studio实现简易进制转换计算器
2022/05/20 Java/Android