解决webpack vue 项目打包生成的文件，资源文件均404问题

　　最近在使用webpack + vue做个人娱乐项目时，发现npm run build后，css js img静态资源文件均找不到路径，报404错误。。。网上查找了一堆解决办法，总结如下

一、首先修改config目录下的index.js文件

将其中build的配置项assetsPublicPath进行修改，改为

目的是将资源文件的引入路径，改为相对地址（相对index.html）

二、此时html中的js、css、img引入均没有问题，但是css中的background-image还是报404

此时的问题原因是，使用了相对地址后，在css进行引入的图片路径，其相对的是css文件的路径

此时的修改方法是，修改build文件夹中的utils.js文件，修改如下这一行

这样css中的背景图也OK了，如果在css中引入字体也可以用这样的方式修复404问题

搞定！！！

转载于:https://www.cnblogs.com/skyHF/p/8243653.html

解决webpack vue 项目打包生成的文件，资源文件均404问题相关推荐

vue html引入资源dev下404,webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)...
最近在使用webpack + vue做个人娱乐项目时,发现npm run build后,css js img静态资源文件均找不到路径,报404错误...网上查找了一堆解决办法,总结如下一.首先修改c ...
webpack引入iview.css,解决webpack+Vue引入iView找不到字体文件的问题
原因: css-loader后面带了参数modules(打包报错) url-loader后面带了参数name(引入报错) { test: /\.css$/, use: ExtractTextPlugi ...
Vue项目打包生成后音频文件消失
一个正常项目中,对于前端img,js,css,audios,viedo等文件是必不可少的~上篇文章已经讲部署时js,css,img资源的路径问题~这期呢,主要讲的就是关于打包后音频消失了~瞬身之术~ ...
vue 项目打包上线后 js css 文件找不到
在vue项目完成后打包上线,放到服务器上发现js和css引入不到,页面加载不出来. 在使用vue-cli3以上版本构建的应用时,跟以下方式api有些区别: 如何区分是哪个版本? 可查看项目中是否有co ...
vue项目打包部署到服务器上后页面404问题
vue路由配置: const router = new VueRouter({base: process.env.BASE_URL,//hash模式下部署到服务器访问没问题,history就不行,需要 ...
使用nw.js将vue项目打包为可在xp系统运行的桌面程序
前情提要在nw.js入门最如丝般润滑的教程一文中,作者介绍了简单的使用nw运行html文件为桌面程序以及将html文件打包为桌面可执行文件exe. 看vuecli创建的工程打包成exe文件可直接从[ ...
Vue项目打包后不能正常显示页面
项目场景: 通过 Vue CLI 创建的 vue 项目,编写完项目后,通过 npm run bulid 对项目进行打包,再把打包得到的内容(dist文件夹)交给后端部署到服务器上. 问题描述: 对 v ...
快速解决Vue项目打包后文件过大问题
快速解决Vue项目打包后文件过大问题为什么打包后文件过大? 如何快速解决一.路由懒加载[使用es6提案的import()方式] 二.CDN引入为什么打包后文件过大? 移动app项目,使用vue- ...
vue 不生效打包样式_解决在vue项目中webpack打包后字体不生效的问题
最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效.如图: 打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unic ...

解决webpack vue 项目打包生成的文件，资源文件均404问题

解决webpack vue 项目打包生成的文件，资源文件均404问题相关推荐

最新文章

热门文章