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

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

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

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

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

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

module.exports = {
    publicPath: './',
}

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