问题起因

vue-cli脚手架打包项目访问页面空白:GET file:///XXX::ERR_FILE_NOT_FOUND

问题原因

首先报错是显示文件未找到,由于我们是打开打包后的index.html页面,这时候可以看一下html引入文件路径是否正确

控制台报错信息

页面报错导致空白的页面引入文件路径

这时候可以看到引入的文件以/开头了

这里刚好说一下:./    /    ../ 的区别

1、./是当前目录

2、../是父级目录

3、/是根目录

所以这样的引入路径最终可能是到你的c盘或者其他盘符文件夹下面了

解决方案

先是把路径问题解决了,要使用相对路径

在项目根目录下的vue.config.js中加入  publicPath: './',

关键: publicPath: './'

现在再来npm run build一下访问页面

页面没有报错

可以看到没有报错,但是还是页面空白,第二步则是要改一下vue 中的路由状态 mode

vue的mode路由状态

vue的两种路由状态

1.默认是hash模式

表现形式是url上域名后面会有个#/ 后面跟着要访问的页面path

路由配置和url访问

如这次首页的路径配置,访问时(...index.html)#/和(...index.html)#/home都可以访问到页面

2.HTML 5  history 模式

　history模式是HTML 5 的新模式，来模仿完整的 url 实现页面无刷新前进后

由于该项目使用了路由,所以需要hash模式,如果要使用history模式则需要服务端配合处理,在服务端加一个覆盖所有的情况的候选资源：如果URL匹配不到任何静态资源，则应该返回一个index.html