解决npm run build 之后生成的index.html页面打开为空

今天在用npm构建前端项目之后发现生成dist文件夹中的页面是空的,于是F12看了一下发现有报错:

cb34d61f0f2f4bd88a3f14087a5d262a

这个报错很显然是找不到文件,因此我猜可能是构建项目过程中路径出错了。打开index.html的源码来看,发现路径用的是’/‘,但index.html文件和js文件夹是同级目录,如果从index.html进入到js文件夹内的文件,需要用’./‘。
也就是说,对比dist文件夹结构可以看到资源路径的引入是错误的,**应该用’./‘而不是’/‘**。

结合了百度,发现一个有效的解决方案:

在项目根目录下创建一个vue.config.js文件,写入:

1
2
3
module.exports = {
publicPath: './',
}

然后再次npm run build进行打包。打包完成后,再打开dist文件夹内的index.html文件,就可以正常显示项目了。