vue build 后资源路径不对

最新推荐文章于 2025-07-05 13:41:29 发布
原创 最新推荐文章于 2025-07-05 13:41:29 发布 · 1w 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文介绍了解决Vue项目打包后资源路径问题的方法。通过正确配置index.js中的assetsPublicPath，在开发和构建环境中分别设置不同的资源路径，确保静态资源能够正确加载。

vue 打包后资源路径不对，本质是配置错误。在index.js中，要分开配置build 与dev时的路径。
这里写图片描述
图上是我的资源目录，图下是我的配置文件

这里写图片描述

dev 下，不需改动配置，run dev 即可。
build时，将assetsPublicPath 的路径换成服务器上对应的根目录。 如我的项目在服务器上路径为XXx.hive.cn/vue/ 。直接访问XXx.hive.cn/vue/index.html 即可打开项目。 这样配置后，不许用考虑图片路径问题，更不需用考虑css和js等资源路径问题了，perfect！！！

以上方式有一定问题，就是得指定服务器的目录名。可以设置build的assetsPublicPath为空，这里写图片描述
这样编译后的index.html文件将可以直接引到static下的资源。也不需资源文件的目录名与服务器存放的整个编译文件的目录名相同

干货满满，解决vue打包后静态资源路径错误的问题，3个月学会前端开发
2401_83739434的博客
04-08 1739
2.保证资源转码条件符合。这块主要涉及到加载用到的加载器url-loader, 需要保证其配置可执行。打开build目录下的webpack.base.conf.js看代码：.*)?$/,options: {limit: 10000, // 该限制为小于10KB的图片，系统默认转码为base64},
关于ThinkPHP框架项目在二级目录时，__PUBLIC__路径的问题
热门推荐
Devons Shared
11-19 1万+
[ThinkPHP 3.1.3] __PUBLIC__解析的问题 在二级目录下开发基于ThinkPHP项目，有时会发现__PUBLIC__不太一样。 例如说 在开发个论坛，项目在 localhost/bbs/ 下，在模版中使用__PUBLIC__时，会得到/bbs/Public 另外又在开发个博客时，项目在 localhost/blog 下，在模版中使用__PUBLIC__时，却有可能会
解决vue项目,npm run build后,报路径错的问题
10-14
主要介绍了解决vue项目,npm run build后,报路径错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
关于Vue打包之后文件路径出错的问题
qq_37319220的博客
01-11 9798
这里以vue-cli创建的项目为例 1、文件路径不对 找到config文件夹下的index.js文件修改一下位置 看清楚是 build（上边还有个dev 是开发环境下的配置，不需要改动）下的 assetsPublicPath ：将‘/’改为‘./’ 2、背景图片路径不对 在css中写的background-img的路径出错 需要找到build文件夹下的utils.
vue2项目使用build打包成压缩包.zip文件
最新发布
qq_36738092的博客
07-05 205
vue 项目打包成zip格式
vue cli 3 build 打包之后路径错误问题
wy_Blog的博客
03-30 1万+
vue-cli 3.x 打包上线 【入坑合集】 问题1：使用vue-cli 3.x开发的项目，开发的时候顺利无比，一旦打包上线各种问题就来了。首先是资源里面报各种各样的请求错误。 解决思路：在src文件夹同级目录下创建vue.config.js文件 在vue.config.js中重写打包后的基础路径为当前目录 module.exports = { //... base...
【VUE】Vue项目build后静态资源路径错误问题
SZnAl的博客
09-04 587
使用npm run build后 打开dist文件夹的index.html文件空白。在vue.config.js中添加：publicPath: './',控制台显示很多文件未找到的报错。
vue 打包文件路径不对解决方式
Huang_wf
10-09 4445
npm run build 打包后报错 解决方式 assetsPublicPath: './' 这里加个前缀 这里加一行 publicPath:"../../" vue-cli3 需要在vue.config.js 文件中配置 module.exports = { baseUrl: process.env.NODE_ENV === 'p...
vue webpack build资源相对路径的问题及解决方法
10-15
通过以上设置，可以确保Vue项目在不同部署环境下的资源路径配置正确，从而避免资源加载失败的问题。对于希望更深入理解和应用这些知识的开发者来说，可以继续查阅相关文章或对vue-cli、webpack的官方文档进行研究，...
Vue打包后访问静态资源路径问题
12-13
Vue介绍中static文件夹里放的是静态资源目录，如图片、字体等。 我们发现运行npm run start后本地图片路径是没问题的，...以上就是Vue打包后访问静态资源路径问题的相关知识点，感谢大家的阅读和对软件开发网的支持。
Npm run build 打包之后打开dist的index.html报静态资源路径错误
qq_32741973的博客
04-09 1010
解决方法一.修改config下的assetsPublicPath的'/'为'./'，重新npm run build,再打开dist的index.html 解决方法二：安装一个http-server在本地开启一个本地的服务器，assetsPublicPath的'/'不用加. ...
解决Hbuilderx打开一个vue文件，从外部运行时无法将“D:\node-v20.18.0-win-x64”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。
2301_76841757的博客
10-19 275
2.环境变量只需要在系统变量path里将node所在文件写入即可。我的是D:\node-v20.18.0-win-x86。npm路径应该到npm.cmd，我本来写到D:\node-v20.18.0-win-x86就会一直显示这个问题。1.首先看这个问题是这个磁盘位置，在hbuilderx运行配置内进行修改。通过工具->设置打开。
webpack bulid后时，网页白屏,报错：导入的资源文件路径不对
xlzy
12-06 2035
运行yarn run build后，打开dist中的index.html文件，发现白屏，控制台报资源文件引入路径不正确：很明显这是webpack build配置的问题找到config/index.js打开 如图中assetsPublicPath：‘/’，将/改为. 然后yarn run bulid 可以发现 路径全部正确了
vue 打包后 static 中图片路径不对的问题，腾讯T2大佬手把手教你
2401_84139728的博客
04-11 879
没错，其实在我们准备打包项目之前，需要考虑的一个问题是：【我们的项目最终是要部署在根目录还是子目录】如果是部署在，并不会出现什么问题，因为你的资源文件放在static中，然后你在引用的时候，都是这样的路径来引用（不管是css中，还是template中），这样是不会有任何问题的。大家看到我这个项目的访问路径，应该就知道，我这是属于 【】 部署的情况。那么在部署的时候，就有可能出现本文要说的这个问题 【vue 打包后 static 中图片路径不对的问题】所以，本文后续内容的前置条件就是部署。
Vue Build后的项目的根路径配置问题
明谨的博客
11-20 3285
目录Vue Build后的项目的根路径配置问题问题描述修改方法 Vue Build后的项目的根路径配置问题 问题描述 使用Vue-cli 版本v3.12.1，build之后默认的根目录contextPath为/。如果正式部署的路径不是/，则需要修改发布的根路径，否则会js和静态资源会报404问题。 修改方法 工程文件 /config/index.js 修改build下的assetsPublicP...
vue打包后路径失效、找不到、404的问题
csdn_chengpeng的博客
10-09 2823
vue打包路径丢失的问题 在vue项目打包以后，本地打开项目会出现css、js路径404的问题，这是因为vue打包后的路径默认是根路径。 解决方法： 在vue.cofign.js文件中将 publicPath: ‘/’, 更改为 publicPath: ‘./’,（如果没有vue.cofign.js文件，需要自行创建一个） ...
Vue-cli3和Vue-cli4打包 npm run build 路径错误解决办法(亲测管用)
wzg0817的博客
07-29 2115
– Vue-cli3打包 npm run build 路径错误解决办法 我们用vue-cli搭建的项目执行npm build后本地打开页面空白，如何才能查看npm run build之后的结果呢。 我们先看一下提示信息： Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work. 这段话的意思就是说：构建文件务必放在一个HTTP服务器。直接打开i.
Vue项目build后静态资源文件路径或新建文件夹图片路径找不到的问题
weixin_34167819的博客
11-01 2593
问题描述：使用vue-cli脚手架工具生成的vue项目，使用npm run build后生成的文件直接双击打开白屏一片。 解决方案： 第一步：修改build文件夹下utils.js，在以下位置加入 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallbac...
vue a链接本地地址失效
Yss915的博客
11-08 744
a href链接的相对位置，是相对于index.html的，不是相对于当前文件，在vuecil3中index.html在public文件夹中， 比如我在syslog文件中引用mylogs文件夹中的文件是写的./file/myLogs/web_error.log 而不是../../../public/file/mylogs/web_error.log ...
Vue3 vite打包静态资源路径
03-18
好的，我需要帮助用户在Vue3项目中正确配置Vite的静态资源路径。用户提到了打包时路径的问题，并且引用了几个相关资料。首先，我需要理解用户的问题：他们想知道如何设置Vite的配置来确保静态资源路径正确，尤其是在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值