vue-cli脚手架创建创建的项目打包后无法正常打开报 Failed to load resource: net::ERR_FILE_NOT_FOUND错误

已于 2023-07-24 14:12:52 修改
阅读量674 收藏
点赞数 1
分类专栏： 前端 文章标签： vue.js 前端 javascript
于 2023-07-24 14:11:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/LLL3189860667/article/details/131895025
版权
文章讲述了在遇到使用最新脚手架打包项目后，index.html无法正常打开并出现控制台报错的情况时的解决方案。通过在vue.config.js中设置publicPath为./以及关闭router.js中的history模式，可以成功解决这个问题，使得打包后的项目可以正常访问。

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

亲爱的小伙伴们，你们最近是否有遇到用使用最新的脚手架打包项目后index.html文件无法正常打开，然后控制台报错的情况呢，不要担心，这个坑今天被我踩到了并且被我解决了，下边就让我来给大家分享一下经验吧！

1.找到vue.config.js文件，进行如下配置

即添加一行配置：pubilcPath:'./'

 2.找到router.js文件，将history模式关闭

 

3.完成配置后重新输入指令后再次打包，你将发现打包后的项目将可以正常访问了

vue打包：Failed to load resource: net::ERR_FILE_NOT_FOUND问题
zxw939832359的博客
12-28 5875
vue项目npm run build 打包会出现： Failed to load resource: net::ERR_FILE_NOT_FOUND 总结解决办法： config/index.js里将assetsPublicPath:’/‘改成assetsPublicPath:’./' assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath:
【一】使用vue-cli创建vue3的helloworld项目
码农从0到1
01-07 844
接下来我们创建 runoob-vue3-app 项目。按下回车键后就会进入安装，等候片刻即可完成安装。2、使用 vue create 命令创建项目。1、安装vue的环境。
Failed to load resource: net::ERR_FILE_NOT_FOUND或者vue dist文件下的index.html没显示
u013365404的专栏
12-28 2万+
vue-cli  npm run dev 可以看到，但是通过dist文件下的index.html直接打开没显示，没看到   知乎上：webpack.prod.conf.js 中output添加参数publicPath:'./' 具体： publicPath: process.env.NODE_ENV === 'production'       ? './' + config.build
Vue 打包后打开为空白页面 并且控制台报错‘Failed to load resource: net::ERR_FILE_NOT_FOUND’
官方推荐
05-12 5790
当我们开发完成后进行 npm run build打包后形成dist文件 我们通过访问dist文件中的index，会出现空白页面什么都不显示的问题，控制台中还会报‘Failed to load resource: net::ERR_FILE_NOT_FOUND’错误，其实是因为打包后的dist目录下的文件引用路径不对，会因找不到文件而报错导致白屏，cli2.0和cli3.0解决办法不同，解决办法如下： Vue cli2版本解决办法 找到我们的 config文件夹下面的 index.js 配置文件 找..
Vue项目打包报错Failed to load resource: net::ERR_FILE_NOT_FOUND
qq_45083936的博客
05-14 867
打包出错显示空白页，或者Failed to load resource: net::ERR_FILE_NOT_FOUND 1.webpack.prod.conf.js 中output添加参数publicPath:’./’ 2.修改webpack.base.conf.js中： publicPath: process.env.NODE_ENV === 'production' ? './' +config.build.assetsPublicPath : './' + config.dev.assets
vue 项目打包报错 Failed to load resource: net::ERR_FILE_NOT_FOUND
c327127960的博客
11-15 1728
vue 项目打包报错 Failed to load resource: net::ERR_FILE_NOT_FOUND
项目打包exe文件报错 Vue CLI build failed. Please resolve any issues with your build and try again.
最新发布
04-03
当执行 `npm run build` 后，在生产环境中访问页面时提示 `Failed to load resource: net::ERR_FILE_NOT_FOUND` 的错误，通常是因为静态文件路径配置不正确所致[^1]。 可以通过修改项目的 `publicPath` 配置来解决...
vue项目打包后打开index.html一片空白
ai
03-16 1732
首先，我们来解释一下vue脚手架项目启动项目的原理，其实，在你使用 npm run dev或npm run serve的时候，实际是临时创建了一个webpack-dev-server或vue-cli-service serve的node服务器，为了方面后面的 hot-reload（热重载）的需求，必须所有的更新都要在服务上处理后进行更新，如果你是单纯用file协议打开静态网站的方式，是没有办法做到这个处理的，如果可以，也是需要编译和重载的，成本很高昂。http模块是node.js原生模块中最为亮眼的模块。
【猿说VUE】初识VUE，带你打开VUE之门
热门推荐
黑白猿的琐碎日常
02-29 2万+
自从近几年前后端分离模式开始后，作为从事后端开发的我，为了跟上时代的步伐，或者能够跟现在的年轻人交流，开始了自学VUE的学习之旅。再次记录学习中的点点滴滴，争取把学习过程中的九九八十一难都记录下来，作为自己学习的一个见证，也是对自己的一个督促。
“Failed to load resource: net::ERR_FILE_NOT_FOUND“错误 。vue-cli 3.0 创建的项目，dev下能运行，打包后报错，页面空白 。
小猪的博客
10-15 1万+
cli3.0 解决办法： Failed to load resource: net::ERR_FILE_NOT_FOUND 打开dist/index.html， 引入是有问题的， 在vue-cli 3.0 创建的项目中是找不到webpack的配置文件，因为vue-cli 3.0 将其封装起来了，只需要在项目的根目录下的vue.config.js文件中修改就行了（若项目没有...
Failed to load resource: net::ERR_FILE_NOT_FOUND
weixin_51339619的博客
09-15 648
vue打包页面空白错误解决
vue axios 跨域 请求代理
abelrox的博客
11-20 358
1. vue.config.js的配置 module.exports = { publicPath: './', devServer: { // axios 跨域代理 proxy: { '/api': { target: 'http://192.168.10.129:5000', changeOrigin: true } }
记录错误：Failed to load resource: net::ERR_FILE_NOT_FOUND
fcygcyfv的博客
09-17 1351
记录错误：Failed to load resource: net::ERR_FILE_NOT_FOUND
angular 打包后 index.html 显示Failed to load resource: net::ERR_FILE_NOT_FOUND
u011342224的博客
08-13 1745
Q：run build 之后找不到 .js 资源文件 A： 打包时在ng build后加上–base-href ./
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值