解决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下操作HTML控件的实现代码
Jan 12 Javascript
理解Javascript_08_函数对象
Oct 15 Javascript
checkbox勾选判断代码分析
Jun 11 Javascript
jQuery事件绑定用法详解
Sep 08 Javascript
javascript 动态脚本添加的简单方法
Oct 11 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
Mar 03 Javascript
bootstrap table表格插件之服务器端分页实例代码
Sep 12 Javascript
详解js常用分割取字符串的方法
May 15 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
Jun 18 Javascript
Bootstrap实现省市区三级联动(亲测可用)
Jul 26 Javascript
layui多图上传实现删除功能的例子
Sep 23 Javascript
vue实现在线翻译功能
Sep 27 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 下载保存文件保存到本地的两种实现方法
2013/08/12 PHP
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
求得div 下 img的src地址的js代码
2007/02/28 Javascript
JQuery入门—编写一个简单的JQuery应用案例
2013/01/03 Javascript
js关闭父窗口时关闭子窗口
2013/04/01 Javascript
jquery html动态生成select标签出问题的解决方法
2013/11/20 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
2014/01/06 Javascript
js实现格式化金额,字符,时间的方法
2015/02/26 Javascript
使用javascript实现判断当前浏览器
2015/04/14 Javascript
JavaScript学习笔记之数组随机排序
2016/03/23 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
用vue构建多页面应用的示例代码
2017/09/20 Javascript
jquery实现左右轮播图效果
2017/09/28 jQuery
除Console.log()外更多的Javascript调试命令
2018/01/24 Javascript
node 使用 async 控制并发的方法
2018/05/07 Javascript
JavaScript面向对象程序设计创建对象的方法分析
2018/08/13 Javascript
javascript json字符串到json对象转义问题
2019/01/22 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
countUp.js实现数字滚动效果
2019/10/18 Javascript
jQuery实现评论模块
2020/08/19 jQuery
Vue+Element ui 根据后台返回数据设置动态表头操作
2020/09/21 Javascript
python简单判断序列是否为空的方法
2015/06/30 Python
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
python实现学员管理系统
2019/02/26 Python
美国知名保健品网站:LuckyVitamin(支持中文)
2017/08/09 全球购物
艺术专业大学生自我评价
2013/09/22 职场文书
班组长工作职责
2013/12/25 职场文书
一年级班主任感言
2014/03/08 职场文书
国际贸易系求职信
2014/08/09 职场文书
乡文化站暑期培训方案
2014/08/28 职场文书
2014年个人师德工作总结
2014/12/04 职场文书
2014年体育教学工作总结
2014/12/09 职场文书
2019餐饮行业创业计划书!
2019/06/27 职场文书
golang interface判断为空nil的实现代码
2021/04/24 Golang