解决vue单页面应用打包后相对路径、绝对路径相关问题

站长资源 2024/11/24 佚名

46 1538 46

DDR爱好者之家 Design By 杰米

在项目开发过程中，在部署过程中，用到了反向代理，这就要求前端代码中不能使用绝对路径。但是我们知道，一般情况下，通过webpack+vuecli默认打包后的HTML、css、js等文件，使用的都是绝对路径。下面可以举几个例子来看一下：

1、打包后的index.html文件

2、打包后的css文件

所以，如果在项目中需要使用相对路径来获取静态的资源文件，需要怎么做呢？

1、修改webpack配置文件中的assetsPublicPath，修改为如下图所示。

修改配置后，进行打包发现，打包后的index.html文件中，对css等文件的调用，变成相对路径。

但是同时我们也会的发现这样修改后，导致打包后的css文件中，图片的路径出现问题，如下所示，图片路径出错导致图片找不到。

所以仍需进一步修改配置，使其变成如下路径：

.iradio_flat-yellow{background-image:url(../../static/img/yellow@2x.04850a2.png);

2、处理图片路径问题

在webpack对ExtractTextPlugin插件配置的地方，加入如下代码（具体值可能有变化，依据自身项目打包后文件路径关系确定）

再次打包，发现问题解决！

补充知识：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单页面应用打包后相对路径、绝对路径相关问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

vue,应用打包,相对路径,绝对路径

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“解决vue单页面应用打包后相对路径、绝对路径相关问题”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月24日

解决vue单页面应用打包后相对路径、绝对路径相关问题

浅谈vue项目,访问路径#号的问题

vue调用本地摄像头实现拍照功能

评论“解决vue单页面应用打包后相对路径、绝对路径相关问题”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接