今天在用npm构建前端项目之后发现生成dist文件夹中的页面是空的,于是F12看了一下发现有报错:
这个报错很显然是找不到文件,因此我猜可能是构建项目过程中路径出错了。打开index.html的源码来看,发现路径用的是’/‘,但index.html文件和js文件夹是同级目录,如果从index.html进入到js文件夹内的文件,需要用’./‘。
也就是说,对比dist文件夹结构可以看到资源路径的引入是错误的,**应该用’./‘而不是’/‘**。
结合了百度,发现一个有效的解决方案:
在项目根目录下创建一个vue.config.js文件,写入:
1 | module.exports = { |
然后再次npm run build进行打包。打包完成后,再打开dist文件夹内的index.html文件,就可以正常显示项目了。