解决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的一些注意
Dec 06 Javascript
在JavaScript中操作数组之map()方法的使用
Jun 09 Javascript
JavaScript中的getMilliseconds()方法使用详解
Jun 10 Javascript
JavaScript中使用指数方法Math.exp()的简介
Jun 15 Javascript
jquery实现无刷新验证码的简单实例
May 19 Javascript
将form表单通过ajax实现无刷新提交的简单实例
Oct 12 Javascript
angular分页指令操作
Jan 09 Javascript
js生成随机数方法和实例
Jan 17 Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 Javascript
详解javascript 正则表达式之分组与前瞻匹配
May 30 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
May 20 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
May 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
在mysql数据库原有字段后增加新内容
2009/11/26 PHP
PHP过滤★等特殊符号的正则
2014/01/27 PHP
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
简单实现php上传文件功能
2017/09/21 PHP
php 使用html5 XHR2实现上传文件与进度显示功能示例
2020/03/03 PHP
javascript XML数据显示为HTML一例
2008/12/23 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
2014/02/20 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
js获取ajax返回值代码
2014/04/30 Javascript
Jquery倒计时源码分享
2014/05/16 Javascript
仿JQuery输写高效JSLite代码的一些技巧
2015/01/13 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
2016/05/17 Javascript
js实现华丽的九九乘法表效果
2017/03/29 Javascript
简单实现js上传文件功能
2017/08/21 Javascript
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
vue2实现可复用的轮播图carousel组件详解
2017/11/27 Javascript
Javascript之高级数组API的使用实例
2019/03/08 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
2019/09/10 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
2020/06/24 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
解决vuecli3中img src 的引入问题
2020/08/04 Javascript
Python获取当前路径实现代码
2017/05/08 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
PyTorch 1.0 正式版已经发布了
2018/12/13 Python
利用python脚本如何简化jar操作命令
2019/02/24 Python
Python中zip()函数的简单用法举例
2019/09/02 Python
python同时替换多个字符串方法示例
2019/09/17 Python
如何基于python实现归一化处理
2020/01/20 Python
中学生差生评语
2014/01/30 职场文书
卫生系统先进事迹
2014/05/13 职场文书
土木工程专业本科生求职信
2014/10/01 职场文书
2014年干部培训工作总结
2014/12/17 职场文书
2016公务员年度考核评语
2015/12/01 职场文书
Mysql实现简易版搜索引擎的示例代码
2021/08/30 MySQL