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

最新推荐文章于 2025-03-20 15:44:55 发布
最新推荐文章于 2025-03-20 15:44:55 发布
阅读量7k 收藏
点赞数
分类专栏： vue 文章标签： vue webpack vue-cil
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a120120yyyy/article/details/78048838
版权
当时正在做一个vue的移动端项目，用npm run build打包后，发现有些在dev环境下可用的静态资源失效，经过调试后，发现在vue-cil生成的项目结构中，找到build目录，在build目录下找到utils.js中的ExtractTextPlugin.extract({}),里面添加下面这个属性就完美解决了publicPath: '../../'
干货满满，解决vue打包后静态资源路径错误的问题，3个月学会前端开发
2401_83739434的博客
04-08 1657
2.保证资源转码条件符合。这块主要涉及到加载用到的加载器url-loader, 需要保证其配置可执行。打开build目录下的webpack.base.conf.js看代码：.*)?$/,options: {limit: 10000, // 该限制为小于10KB的图片，系统默认转码为base64},
vue项目webpack打包后找不到静态资源、图片，报404问题
lyn1772671980的博客
06-26 7788
修改vue-cli脚手架生成的build文件夹下的utils.js的publicPath:'../../'if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath:'../../'...
vue项目使用webpack打包后部署到服务中无法读取静态资源
followly的博客
12-11 2280
在打包vue项目时，因为通过脚手架生成的项目，部署到服务中会出现读取静态资源404的情况
vue中解决@路径无法跳转的问题
weixin_52043516的博客
05-10 1174
都是
Vue 项目打包后路径问题的解决方法
最新发布
有我更精彩的博客
03-20 970
Vue 项目打包后路径问题通常由静态资源路径错误、路由路径错误、环境变量路径错误或publicPath配置错误引起。通过正确配置静态资源路径、Vue Router 的base选项、环境变量、publicPath配置以及使用相关插件，可以有效解决这些问题。希望本文的介绍能帮助你在 Vue 开发中更好地处理打包后的路径问题，确保项目在生产环境中的正常运行。最后问候亲爱的朋友们，并邀请你们阅读我的全新著作📚《Vue.js 3企业级项目开发实战（微课视频版》
vue打包相对路径，设置publicPath没作用解决方法
ejunda的博客
10-18 2597
不知道为什么会导致，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 386
转载地址：https://www.e-learn.cn/content/qita/792964
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打包后字体和图片资源失效问题的解决方法
08-27
这主要是由于Vue的Webpack配置在打包过程中对静态资源进行了处理，使得原有的相对路径失效。本文将详细介绍如何解决Vue打包后字体和图片资源失效的问题。 首先，我们来看一下`font-awesome`字体失效的问题。`font-...
解决vue单页面应用打包后相对路径、绝对路径相关问题
10-14
在Vue.js开发中，单页面应用（SPA）的构建与部署时常会遇到关于路径的问题，尤其是在使用Webpack打包之后。在本篇文章中，我们将探讨如何处理Vue单页面应用中打包后的相对路径和绝对路径问题。 首先，理解绝对路径...
vue webpack build资源相对路径的问题及解决方法
10-15
主要介绍了vue webpack build资源相对路径的问题，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
继上文webpack打包上线找不到静态资源(publicPath)
weixin_47426048的博客
04-28 2952
webpack 配置 publicPath的理解 　　在学习webpack的时候，配置文件中有一个publicPath属性，一直不是很明白它到底是怎么用，也查了很多资料，得到最多的说法是当打包的时候，webpack会在静态文件路径前面添加publicPath的值，当我们把资源放到CDN上的时候，把publicPath的值设为CDN的值就可以了。但是在使用webpack 进行开发的时候，得到的结果却和该说法不是很一致，经过一段时间的摸索，好像是懂了一点点，至少在简单的配置中不会报错，在这里记一下，做一个总结.
webpack打包js文件的问题
一捌柒的博客
08-10 2243
前言 这里记录下webpack打包js文件的配置和遇到的问题。因环境版本等不同，解决办法未必都是通用的，仅作为大家参考之用； 我的环境配置 macOS M1 系统 webpack版本：(全局版本）webpack 5.49.0，webpack-cli 4.7.2 node版本：v14.17.4 开发工具：webstorm 学习自建目录结构 dist目录下存放的是我们webpack打包后的最终js输出文件 node_modules 是我们安装项目本地的webpack后，目录自动生成的，全局和本地的webpa
webpack serve 正常启动但没效果
goodman2980的博客
08-08 1506
安装完 webpack-dev-server 后 配置webpack.config.js。然后 npm run dev，服务器正常启动，且保存修改index.js有反应。但是打开网页却发现js的修改对网页没有效果。在package.json中配置。
vue-cli3.0.4中，webpack的dist路径修改方法
大赚万万亿
12-19 3603
修改的文件在 node_modules\@vue\cli-service\lib\options.js 如图，baseUrl最后一个路径名字要和outputDir的名字相同 修改后的路径结果  另外assetsDir如果有值，那么会把js,css,img之类的静态资源放到该值对应的文件夹里去 填了值 ...
webpack-dev-server：静态资源目录配置
席木木的博客
01-17 7441
webpack-dev-server：静态资源目录配置
webpack打包静态资源(2)
weixin_56817537的博客
09-15 1611
webpack打包静态资源(2)
Vue项目中，如何正确配置css-loader和Webpack，确保npm run build后静态资源图片不出现404错误？
11-01
在Vue项目开发中，配置css-loader和Webpack以确保npm run build后静态资源图片正确加载是一个关键步骤。首先，需要理解Webpack如何处理静态资源，特别是图片文件。Webpack默认会处理src目录下的文件，而static目录下的文件则不会经过Webpack处理，因此静态资源应放在static目录下以避免被打包处理。针对css中的图片路径引用，可以通过配置css-loader来解决。 参考资源链接：[Vue打包后图片失效：解决路径与存放位置问题](https://wenku.csdn.net/doc/6401ad28cce7214c316ee828?spm=1055.2569.3001.10343) 具体步骤如下： 1. 确保你的图片资源放置在项目的static目录下，例如：`src/static/images/background.png`。 2. 在你的`vue.config.js`文件中配置webpack，以便正确地引用static目录下的资源。例如： ```javascript module.exports = { // 其他配置... configureWebpack: { module: { rules: [ { test: /\.(png|jpe?g|gif)$/i, use: [ { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: 'assets/', publicPath: process.env.NODE_ENV === 'production' ? '/your-app-name/' : '/' } } ] } ] } } }; ``` 在这个配置中，使用了file-loader来处理图片文件，并通过outputPath和publicPath来指定打包输出的路径和服务器上的访问路径。 3. 如果你需要在CSS中引用背景图片，并且图片存放在static目录下，你可能需要使用`~`符号来指定静态资源的根目录，例如： ```css background-image: url('~@/static/images/background.png'); ``` 这里`@`符号是一个别名，指向了项目的根目录。确保在Webpack配置中已经设置了相应的别名。 通过上述步骤，你可以确保在npm run build后，静态资源图片能够被正确加载，并且在生产环境部署时能够通过正确的路径访问到资源。更多关于如何处理Vue项目中的静态资源和图片引用问题，可以参考这篇资料：《Vue打包后图片失效：解决路径与存放位置问题》。该资料提供了详细的说明和建议，帮助你更好地理解和解决这类问题。 参考资源链接：[Vue打包后图片失效：解决路径与存放位置问题](https://wenku.csdn.net/doc/6401ad28cce7214c316ee828?spm=1055.2569.3001.10343)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值