解决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 相关文章推荐
javascript之ESC(第二类混淆)
May 06 Javascript
JavaScript中的对象化编程
Jan 16 Javascript
js程序中美元符号$是什么
Jun 05 Javascript
js格式化输入框内金额、银行卡号
Feb 01 Javascript
原生js实现自由拖拽弹窗代码demo
Jun 29 Javascript
angularjs 中$apply,$digest,$watch详解
Oct 13 Javascript
jquery dataview数据视图插件使用方法
Dec 23 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 Javascript
Ionic3实现图片瀑布流布局
Aug 09 Javascript
bootstrap multiselect下拉列表功能
Aug 22 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
如何根据业务封装自己的功能组件
Apr 19 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
Protoss热键控制
2020/03/14 星际争霸
Apache设置虚拟WEB
2006/10/09 PHP
php flush类输出缓冲剖析
2008/10/19 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
PHP指定截取字符串中的中英文或数字字符的实例分享
2016/03/18 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
php mysql数据库操作类(实例讲解)
2017/08/06 PHP
PHP创建对象的六种方式实例总结
2019/06/27 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
用php实现分页效果的示例代码
2020/12/10 PHP
关于firefox的ElementTraversal 接口 使用说明
2010/11/11 Javascript
JavaScript 选中文字并响应获取的实现代码
2011/08/28 Javascript
IE下写xml文件的两种方式(fso/saveAs)
2013/08/05 Javascript
jQuery实现div浮动层跟随页面滚动效果
2014/02/11 Javascript
简单谈谈javascript Date类型
2015/09/06 Javascript
理解javascript定时器中的setTimeout与setInterval
2016/02/23 Javascript
JS 对java返回的json格式的数据处理方法
2016/12/05 Javascript
JavaScript闭包_动力节点Java学院整理
2017/06/27 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
2017/11/02 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
Vue中的this.$options.data()和this.$data用法说明
2020/07/26 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
PyCharm 配置远程python解释器和在本地修改服务器代码
2019/07/23 Python
python 画出使用分类器得到的决策边界
2019/08/21 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
python利用百度云接口实现车牌识别的示例
2020/02/21 Python
matplotlib部件之套索Lasso的使用
2021/02/24 Python
美国祛痘、抗衰老药妆品牌:Murad
2016/08/27 全球购物
美国销售第一的智能手机和平板电脑保护壳:OtterBox
2017/12/21 全球购物
幼儿园保教管理制度
2014/02/03 职场文书
校运会口号
2014/06/18 职场文书
班主任师德师风自我剖析材料
2014/10/02 职场文书
四年级小学生评语
2014/12/26 职场文书
体育委员竞选稿
2015/11/21 职场文书
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS
vscode远程免密登入Linux服务器的配置方法
2022/06/28 Servers