问题原因
首先报错是显示文件未找到,由于我们是打开打包后的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