为什么在将vue-cli3本地调试切换为history模式后,页面无法访问?有哪些可能的原因?该如何解决? |
问题分析:在vue-cli3中,使用history模式需要在路由配置中设置mode:'history',这样可以去掉url中的#符号,使网站url更加美观。但是,如果在本地开发过程中使用了mode:'history'后,访问页面时可能会出现404错误或者无法访问页面的情况。这通常是因为我们在history模式下刷新页面时,浏览器会向服务器请求对应的资源,但我们本地并没有对应的资源,从而导致无法访问。解决办法一般有两种:
- 在项目根目录下新建一个vue.config.js文件,在该文件中配置如下代码:
module.exports = {
devServer:{
historyApiFallback:{
index:'/index.html'
}
}
}
这样就可以将所有404的请求,都返回给定的index.html文件,这样就可以保证路由正确,在本地进行history模式的测试。
- 执行npm run build命令,将项目打包成静态文件,将dist目录下的文件部署到服务器上,即可正常访问,不存在本地无法访问的问题。
解决方案:为vue-cli3配置devServer,在fallback选项中设置index.html作为回退页面。或者,将项目打包成静态文件进行部署。