vue-cli2中的webpack打包文件地址出错

最新推荐文章于 2024-03-19 18:17:34 发布
最新推荐文章于 2024-03-19 18:17:34 发布
阅读量344 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cccdf_jjj/article/details/96339397
本文介绍了如何解决项目中背景图片路径错误导致的问题。主要步骤包括：确保背景图片存放在static目录下；修改config文件中的assetsPublicPath为'./'；在webpack.base.conf.js中设置publicPath属性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

写这篇博客是为了记录一下挖坑的过程

下面是报错信息：

  

下面是解决办法

1：背景图片必须放在static里面。

2：在config文件的index.js里面将assetsPublicPath:'/'改为‘./’。这里处理的就是渲染的js,css,img图片的地址了。有这个就可以出来了！

3.处理背景图片地址问题，一般如果不处理，就会遇到地址这样，dist/static/img/static/xxx.png。这是因为背景图片在原来的static里面，地址就很奇怪，这个时候需要配置一下公共路径。publicPath。这里说一下可以怎么改：

第一步:网上的一种方法是在webpack.base.conf.js中解析图片的地方添加publicPath，在options里面增加一个属性publicPath：'./'

第二步:在utils中解析的时候添加这个属性

好了，现在基本可以解决上面报错的问题啦

 

 

Vue - 解决报错 Error: Cannot find module ‘XXX\@vue\cli-service\bin\vue-cli-service.js‘（vue项目编译运行出错，启动失败）
资深程序员
06-24 2535
vue报错，Error: Cannot find module ‘@vue\cli-service\bin\vue-cli-service.js‘，vue2项目启动报错，vue3项目运行出错，vue执行npm run serve报错，找不到@vue/cli-service模块，vue项目关于：Error: Cannot find module ‘D:\@vue\cli-service\bin\vue-cli-service.js‘的解决方案，vue项目跑不起来了，Vue项目报错，跑项目报错Cannot fi
vue 固定名称 打包时_vue-cli打包构建时常见的报错解决方案
weixin_42498585的博客
12-24 389
报错1：vue-cli项目本地npm run dev启动后，chrome打开是空白页解决方案：将config下的index.js中的assetsPublicPath路径都设置为‘/’绝对路径报错2：打包后想要在本地file(直接打开index.html)中打开，但是打开是空白页解决方案：将config下的index.js中的assetsPublicPath路径都设置为‘./’相对路径报错3：打包后...
解决vue2中使用elementUi打包报错的问题
10-14
主要介绍了解决vue2中使用elementUi打包报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-cli2中的webpack打包文件地址出错问题
李墨瞳的博客
11-15 744
已经不是第一次遇到，结果今天还是再问了一遍我们另外一个前端小姐姐，来记录一下。 首先放出报错信息：    当时反应就是，我Dev环境跑起来这么欢快，小老弟，你测试环境你怎么肥四啊？你背着我把文件存哪去了！然后想来想去去找度娘。emmm，信息特别杂乱。那就只能靠我另外一个前端小姐姐了。最后做了3点修改，就完成了。 1：背景图片必须放在static里面。（我之前都不知道，小声bb） 2：在c...
vue2打包时报错
奇点的博客
10-20 1457
vue2打包时报错
vue2 打包报错 in ./src/main.js Thread Loader (Worker 0) Cannot read property ‘length‘ of undefined
前端-舟遥遥的博客
03-01 703
vue2 项目可正常运行，打包报错in ./src/main.js Thread Loader (Worker 0) Cannot read property ‘length’ of undefined。vue-cli 使用 wokrer-loader 加载 web woker 时，使用 npm run build 有很大机率会打包失败。在vue.config.js 配置parallel: false，可以实现构建正式环境关闭thread-loader。
vue-cli 2 打包后的路径问题
weixin_34250709的博客
08-23 866
问题 本栗子是基于vue-cli2.9.6，当我们安装好vue-cli马上开始撸项目，npm run dev进入开发环境时是没有问题的，但当我npm run build 进行项目打包，打包好后浏览disk/index.html 项目时会发现有报错，是资源路径出错，如下 我们再看看index.html里的代码 这里所有的资源路径都是 /s...
用webpack 构建自己的vue-cli
最新发布
hx_1199的博客
03-19 944
用webpack 打包html css js 图片
解决vue-cli + webpack 新建项目出错的问题
08-27
解决vue-cli + webpack 新建项目出错的问题 知识点一：Vue CLI 和 Webpack 的基本概念 在解决问题之前，需要了解 Vue CLI 和 Webpack 的基本概念。Vue CLI 是一个基于 Vue.js 的脚手架工具，用于快速构建和管理 ...
cli dll打包 vue_webpack进阶——DllPlugin优化打包性能（基于vue-cli）
weixin_39636164的博客
12-29 369
本文主要介绍两个插件：DllPlugin和DllReferencePlugin，后者配合前者使用。Github地址：dll-test介绍：打包会输出一个类dll包(dll包源于windows的动态链接库)，这些代码本身不会执行，主要是提供给我们的业务代码引用。(比如dll中有一个工具方法为时间格式化，这个方法本身并不会执行，但是当我们的业务中需要执行时间格式化时，就会引用这个方法在我们的业务中执行...
Vue-cli 2打包静态文件夹static打包路径报错，开发中使用绝对路径，打包后部署到二级目录，绝对路径没用改变。
weixin_43825473的博客
07-22 1370
在开发中，如果使用绝对路径在运行测试环境是没用任何问题的 但是在打包后，路径是回安装原来写的路径完全不改变的搬过去。 那么在部署在二级目录下，读取根目录肯定会报错 解决办法：在开发中使用相对路径 主要文件 config->index.js build->assetsPublicPath: '/二级目录/' 最后的斜线很重要不能省略 static静态文件 build->utils.js exports.cssLoaders下的function generateLoaders if (op
解决Vue打包之后文件路径出错的问题
7酱的博客
06-25 4831
找到webpack.prod.conf.js，在webpack.prod.conf.js找到minify 把minify中的 removeAttributeQuotes: true改为 removeAttributeQuotes: false（如果该方法没有用那就把整个minify去掉再试一下） 然后再执行打包命令：npm run build
vue2项目打包到测试环境之后报错require is not defined
weixin_52941842的博客
01-24 1377
配置打包命令npm run build:test到测试环境之后报错，打包到生产环境没有问题，查找了项目中的require引入似乎也没啥有问题的地方，所以排除是require的原因。
尝试直接使用Webpack打包Vue（Vue2）文件时遇到的问题
qq_37263527的博客
10-03 1298
Module build failed (from ./node_modules/vue-loader/dist/index.js): TypeError: Cannot read property 'styles' of undefined
解决VUE项目打包路径错误，以及自定义打包
mo_jiu的博客
02-23 1520
做vue项目的时候碰到打包上线白屏的问题，这里我使用了一种方式就解决了；在config文件夹中的index.js里找到build里面的  assetsPublicPath: './' 原本它是 assetsPublicPath: '/'  换成 './'即可。 我们打包完的项目一般都是存在dist文件夹中，会有一个index.html和一个static文件夹存放js，css等；如果你不希望...
vue-cli脚手架打包的静态资源请求出错
weixin_33825683的博客
06-05 347
vue-cli脚手架打包的静态资源请求出错 问题 vue-cli默认配置打包后部署到特定路径下静态资源路径错误问题。 静态资源打包使用相对路径后css文件引入大图片路径错误问题 使用vue-cli2脚手架生成的默认打包配置文件，npm run build打包，部署项目到特定路径下：//ip:port/test/index.html 此时访问//ip:port/test/index.html可以...
Vue项目用webpack打包后，预览时资源路径出错（文末有vue项目链接分享）
weixin_33835103的博客
04-16 738
最近用vue写了一些项目，项目写完之后需要打包之后才能放到网上展示，所以在这里记录一下项目打包的过程以及遇到的一些问题。 -------------------------------------------------- 分割线 -------------------------------------------------- 一、项目打包过程： 1.vue项目写完后，首先在...
vue-cli2 打包
weixin_34416649的博客
05-30 563
npm run build 打包安装 相当于静态资源 解决vue-cli项目打包出现空白页和路径错误的问题 路径错误的问题解决方式： 打开config文件夹下的 index.js 找到如下图所示区域： 将build中assetsPublicPath: '/', 改为assetsPublicPath: './', build: { // Template for...
vue项目中的baseUrl设置问题
weixin_38169359的博客
09-04 3606
1、开发环境 2、生产环境（没有所以就没写） 配置axios.js的时候，将baseURL设置成process.env.API_ROOT 参考：https://www.cnblogs.com/jiorence/p/11068730.html 转载于:https://www.cnblogs.com/jvziking/p/11460722...
vue2 打包后 dist文件路径出错
03-30
可能是你的配置文件中没有正确设置打包后的文件路径，或者在使用时没有正确引用路径。 如果你使用的是 vue-cli，可以检查一下 `vue.config.js` 文件中的配置是否正确设置了 `outputDir`，例如： ``` module.exports = { outputDir: 'dist', // ... } ``` 如果你手动配置 webpack，则需要检查 `output` 配置是否正确设置了 `path`，例如： ``` output: { path: path.resolve(__dirname, 'dist'), // ... } ``` 另外，如果你在引用打包后的文件时使用了相对路径，也有可能出现路径错误的情况。建议使用绝对路径或者 webpack 提供的别名来引用文件。 例如，在 vue-cli 中，可以在 `vue.config.js` 中使用 `chainWebpack` 配置别名： ``` module.exports = { chainWebpack: config => { config.resolve.alias.set('@', path.resolve(__dirname, 'src')) }, // ... } ``` 然后在代码中就可以使用 `@/` 来引用 src 目录下的文件了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值