解决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 相关文章推荐
比较全的JS checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
Dec 24 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
May 30 Javascript
JavaScript简单下拉菜单特效
Sep 13 Javascript
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
vue 实现全选全不选的示例代码
Mar 29 Javascript
vue项目中使用Svg的方法
Oct 24 Javascript
简单两步使用node发送qq邮件的方法
Mar 01 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
Jul 22 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
Sep 05 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
Mar 03 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设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
浅谈php中curl、fsockopen的应用
2016/12/10 PHP
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
2007/04/20 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
2013/07/09 Javascript
a标签的href和onclick 的事件的区别介绍
2013/07/26 Javascript
javascript函数定义的几种区别小结
2014/01/06 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
uploadify多文件上传参数设置技巧
2015/11/16 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
2016/05/26 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
2016/05/28 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
简述jQuery Easyui一些用法
2017/08/01 jQuery
vue2单元测试环境搭建
2018/05/24 Javascript
vue-router两种模式区别及使用注意事项详解
2019/08/01 Javascript
[01:14:05]《加油DOTA》第四期
2014/08/25 DOTA
简单介绍Python中的floor()方法
2015/05/15 Python
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
python手写均值滤波
2020/02/19 Python
Python列表如何更新值
2020/05/27 Python
Python调用SMTP服务自动发送Email的实现步骤
2021/02/07 Python
一款基于css3的动画按钮代码教程
2014/11/23 HTML / CSS
C#中有没有静态构造函数,如果有是做什么用的?
2016/06/04 面试题
EJB的几种类型
2012/08/15 面试题
应届生英语教师求职信
2013/11/05 职场文书
初一地理教学反思
2014/01/16 职场文书
护理专业学生职业生涯规划范文
2014/03/11 职场文书
室内设计专业自荐信
2014/05/31 职场文书
数学考试作弊检讨书300字
2015/02/16 职场文书
贪污检举信范文
2015/03/02 职场文书
攻略丨滑雪究竟该选哪款对讲机?
2022/02/18 无线电
MySQL数据库实验之 触发器和存储过程
2022/06/21 MySQL
戴尔Win11系统no bootable devices found解决教程
2022/09/23 数码科技