history模式刷新404;vue.esm.js:628 [Vue warn]: Cannot find element: #app

history模式刷新404的问题:

就是它向服务器发送请求了

当我搭建路由的时候,使用hash的时候非常友好,为什么,使用history路由的时候会报错;

在这里插入图片描述
在这里插入图片描述

这里如果是history的话它会做一件事情;
当我们访问接口,或者访问路由的话,就是我们的浏览器会向后端发送一个请求,而后端没有这个接口,会导致当前地址没找到,一旦没找到地址屏幕会显示空白。

所以说它默认会把main当成服务器接口的地址请求。

怎么让它不按照接口的方式请求,默认是按照路由里面去找,去webpack.dev.js里面找一个devServer配置文件:

 devServer: {
    
    
    port: 9999,
    quiet: true,//安静模式
    progress: true,//进度条
    compress: true,//Gzip压缩
    historyApiFallback:true,//刷新页面时不会向服务器发送请求
    }

historyApiFallback:true当你用history模式的时候我们的API就会被返回了,接口就不会直接去请求。

现在所配置的这个模式是基于开发里面去设置,只在本地开发环境中生效;
真正打包上线了到服务器里就不好使了,因为webpack.dev.js文件不会被打包,打包的是src下面的;

上线到服务器了,解决方法:后端重定向到index.html

猜你喜欢

转载自blog.csdn.net/Menqq/article/details/114286807