zl程序教程

您现在的位置是:首页 >  前端

当前栏目

Vue 打包后打开为空白页面 并且控制台报错‘Failed to load resource: net::ERR_FILE_NOT_FOUND’

VueNet打包Failed 报错 to not 页面
2023-09-27 14:27:14 时间

问题描述

当我们开发完成后进行 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 配置文件
在这里插入图片描述

找到其中的 build 相关配置,assetsPublicPath 这一项默认配置的是‘/’ 我们将他改成 ‘./’
在这里插入图片描述
修改完成后,重新打包即可

Vue cli3版本解决办法

cli3和cli2形成的目录是不一样的,首先我们找到根目录中新建 vue.config.js 文件
在这里插入图片描述

  • 文件中添加如下代码
    在这里插入图片描述
	javascript
		module.exports = {
		 publicPath: "./" 
		};

第二个就是我们的路由文件中 如果要是选择的是 history 模式 我们需要将其注释掉
在这里插入图片描述
修改后再次打包就好了