解决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 相关文章推荐
来自chinaz的ajax获取评论代码
May 03 Javascript
JavaScript 判断日期格式是否正确的实现代码
Jul 04 Javascript
jquery的attr方法禁用表单元素禁用输入内容
Jun 23 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
Jun 27 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
May 03 Javascript
直接拿来用的页面跳转进度条JS实现
Jan 06 Javascript
AngularJS下对数组的对比分析
Aug 24 Javascript
Vue.js系列之项目搭建(1)
Jan 03 Javascript
vue系列之动态路由详解【原创】
Sep 10 Javascript
JS Testing Properties 判断属性是否在对象里的方法
Oct 01 Javascript
js正则表达式校验指定字符串的方法
Jul 23 Javascript
微信小程序实现多张图片上传功能
Nov 18 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生成网页快照 不用COM不用扩展.
2010/02/11 PHP
PHP 文件上传全攻略
2010/04/28 PHP
php中inlcude()性能对比详解
2012/09/16 PHP
Laravel实现构造函数自动依赖注入的方法
2016/03/16 PHP
js 表格隔行颜色
2009/12/02 Javascript
JavaScript中的apply()方法和call()方法使用介绍
2012/07/25 Javascript
jQuery列表拖动排列具体实现
2013/11/04 Javascript
JQuery的ready函数与JS的onload的区别详解
2013/11/21 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
js中style.display=""无效的解决方法
2014/10/30 Javascript
jQuery基础知识小结
2014/12/22 Javascript
JavaScript动态改变div属性的实现方法
2015/07/22 Javascript
js判断当前页面在移动设备还是在PC端中打开
2016/01/06 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
AngularJS 文件上传控件 ng-file-upload详解
2017/01/13 Javascript
javascript常用的设计模式
2017/02/09 Javascript
vue实现简单表格组件实例详解
2017/04/16 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
2017/09/06 jQuery
python 队列详解及实例代码
2016/10/18 Python
Python 使用PIL numpy 实现拼接图片的示例
2018/05/08 Python
解决Python运行文件出现out of memory框的问题
2018/12/03 Python
对python requests发送json格式数据的实例详解
2018/12/19 Python
Python shelve模块实现解析
2019/08/28 Python
Python调用飞书发送消息的示例
2020/11/10 Python
使用css3绘制出各种几何图形
2016/08/17 HTML / CSS
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
利用HTML5 Canvas制作一个简单的打飞机游戏
2015/05/11 HTML / CSS
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
黄继光的英雄事迹材料
2014/02/13 职场文书
小学优秀班集体申报材料
2014/05/25 职场文书
倡议书的格式写法
2015/04/28 职场文书
上学路上观后感
2015/06/16 职场文书
python库sklearn常用操作
2021/08/23 Python
java多态注意项小结
2021/10/16 Java/Android
python神经网络学习 使用Keras进行简单分类
2022/05/04 Python
nginx 添加http_stub_status_module模块
2022/05/25 Servers