用webpack打包vue项目后，静态资源路径失效问题

修复Vue静态资源路径
最新推荐文章于 2025-10-21 18:06:16 发布
原创 最新推荐文章于 2025-10-21 18:06:16 发布 · 7k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #webpack #vue-cil

解决Vue项目中静态资源在生产环境中无法加载的问题。通过修改utils.js文件中的ExtractTextPlugin配置，添加publicPath属性来确保静态资源正确加载。
当时正在做一个vue的移动端项目，用npm run build打包后，发现有些在dev环境下可用的静态资源失效，经过调试后，发现在vue-cil生成的项目结构中，找到build目录，在build目录下找到utils.js中的ExtractTextPlugin.extract({}),里面添加下面这个属性就完美解决了publicPath: '../../'
vue webpack打包后图片路径错误的完美解决方法
10-17
总结来说，解决Vue + Webpack打包后图片路径错误的关键在于理解Webpack的打包逻辑和资源路径处理方式。通过调整`assetsPublicPath`和`publicPath`，以及在`utils.js`中处理CSS资源的路径，我们可以确保图片在生产...
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
11-19
由于Vue CLI和Webpack打包后生成的文件结构与源代码结构不同，因此需要使用绝对路径或者相对打包后的路径来确保文件能被正确引用。 7. **webpack.base.config.js**： 有些情况下，你可能需要在`webpack.base....
vue项目使用webpack打包后部署到服务中无法读取静态资源
followly的博客
12-11 2443
在打包vue项目时，因为通过脚手架生成的项目，部署到服务中会出现读取静态资源404的情况
vue中解决@路径无法跳转的问题
weixin_52043516的博客
05-10 1220
都是
一篇文章带你掌握前端框架 Vue
最新发布
殊途的博客
10-21 1224
Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面，本文全面介绍了 Vue 的核心概念和使用方法。
vue打包相对路径，设置publicPath没作用解决方法
ejunda的博客
10-18 2845
不知道为什么会导致，publicPath没有生效。transpileDependencies这个属性，
vue打包 assetsPublicPath改变，static下文件访问不到的问题
热门推荐
Helen
03-29 3万+
问题背景： 一、.smallTarget项目，使用vue官网脚手架，修改了/config/index.js文件，把默认打包后的文件夹名称改成了“smallTarget”，这时候npm run build 打包部署，就可以访问到以smallTarget为根目录的页面。（相当于只修改了文件夹的名称而已） index: path.resolve(__dirname, '../smallTarget/i...
vue路径问题
mentalitys的博客
07-03 410
转载地址：https://www.e-learn.cn/content/qita/792964
基于vue打包后字体和图片资源失效问题的解决方法
08-27
这主要是由于Vue的Webpack配置在打包过程中对静态资源进行了处理，使得原有的相对路径失效。本文将详细介绍如何解决Vue打包后字体和图片资源失效的问题。 首先，我们来看一下`font-awesome`字体失效的问题。`font-...
解决vue单页面应用打包后相对路径、绝对路径相关问题
10-14
在Vue.js开发中，单页面应用（SPA）的构建与部署时常会遇到关于路径的问题，尤其是在使用Webpack打包之后。在本篇文章中，我们将探讨如何处理Vue单页面应用中打包后的相对路径和绝对路径问题。 首先，理解绝对路径...
干货满满，解决vue打包后静态资源路径错误的问题，3个月学会前端开发
2401_83739434的博客
04-08 1781
2.保证资源转码条件符合。这块主要涉及到加载用到的加载器url-loader, 需要保证其配置可执行。打开build目录下的webpack.base.conf.js看代码：.*)?$/,options: {limit: 10000, // 该限制为小于10KB的图片，系统默认转码为base64},
vue填坑之webpack run build 静态资源找不到的解决方法
12-09
vue cli搭建的项目，在本地测试调试都OK，运行npm run dev之后运行正常，今天放到服务器上跑，结果RD说找不到打包后的静态资源，浏览器控制台错误代码404 问了RD，因为服务器上线方式的调整，不会指定具体项目路径因此，https://bigdata.yiche.com/static/css/app.149f36018149fcbe537f02cafdc6f047.css 这个文件找不到，看看我们正常打包好的目录： 正确的访问路径是：https://bigdata.yiche.com/deploy/static/css/app.149f36018149fcbe537f02cafd
继上文webpack打包上线找不到静态资源(publicPath)
weixin_47426048的博客
04-28 3030
webpack 配置 publicPath的理解 　　在学习webpack的时候，配置文件中有一个publicPath属性，一直不是很明白它到底是怎么用，也查了很多资料，得到最多的说法是当打包的时候，webpack会在静态文件路径前面添加publicPath的值，当我们把资源放到CDN上的时候，把publicPath的值设为CDN的值就可以了。但是在使用webpack 进行开发的时候，得到的结果却和该说法不是很一致，经过一段时间的摸索，好像是懂了一点点，至少在简单的配置中不会报错，在这里记一下，做一个总结.
Webpack打包后静态文件位置变了 导致到不位置
jt15881622410的博客
06-29 1341
3、配置公共路径：可以在打包工具的配置文件中配置公共路径，使静态文件的引用路径正确。例如，在Webpack中可以使用publicPath配置项来指定静态文件的公共路径。1、使用相对路径：在代码中使用相对于当前文件的路径来引用静态文件。例如，如果静态文件与当前文件在同一目录下，可以使用./来引用静态文件。4、使用CDN：如果静态文件被托管在CDN上，可以使用CDN的路径来引用静态文件。2、使用绝对路径：可以使用绝对路径来引用静态文件。例如，可以使用项目的根路径作为基准，使用/开头的路径来引用静态文件。
【webpack】webpack打包后, 静态图片资源不显示的若干个问题
每天进步一点点, 靠近小目标一点点~
11-15 4173
最近在搭建公司的前端组件库, vue写的, webpack打包后, 在项目中引用组件库 其中有个组件引用了静态图片资源, 然而打包后在项目中引用该组件的图片就不显示了 遇到了以下若干问题, 小小记录一下~
vue填坑之webpack run build 静态资源找不到
qq_30346089的博客
09-12 2万+
vue cli搭建的项目，在本地测试调试都OK，运行npm run dev之后运行正常,run build后放到线上找不到静态资源文件路径，最后终于解决
微前端 qiankun webpack打包后静态资源路径404问题解决
weixin_45020094的博客
12-07 7162
首先出现静态资源加载失败的原因是路径问题， 子应用的路径被父应用影响，解决方法 你需要将你的 webpack publicPath 配置设置成一个绝对地址的 url { output: { publicPath: `//localhost:${port}`, } } 借助 webpack 的 url-loader 将字体文件和图片打包，小文件转 base64 ，大文件注入路径前缀 vue cli2写法 const publicPath = process.env.NODE_ENV ===
vue项目在webpack打包后静态资源问题以及上线CDN找不到资源
weixin_47426048的博客
04-27 1333
项目遇到一个问题,本地vue项目run起来,能够访问到静态资源,一上线打包后就不行,而且本地打包后dist下也有该资源,这是怎么回事呢, module.exports = { /** * You will need to set publicPath if you plan to deploy your site under a sub path, * for example GitHub Pages. If you plan to deploy your site to https:/.
vue项目webpack打包后找不到静态资源、图片，报404问题
lyn1772671980的博客
06-26 7849
修改vue-cli脚手架生成的build文件夹下的utils.js的publicPath:'../../'if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath:'../../'...
Vue CLI 3插件实现Webpack打包文件跟踪与元信息生成
“vue-cli-plugin-bundle-tracker”是一个专为Vue CLI 3设计的插件，其主要功能是集成并利用webpack-bundle-tracker工具来生成关于Webpack打包过程的详细元信息。这一插件的核心目标在于增强现代前端项目的构建可...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值