VUE+Nginx history路由模式下,解决页面刷新404

vue项目打包后部署,hash路由模式下,地址栏中会有 # 的存在,它其实是为让你项目内能够解析 路由而存在的,改成history模式,可以去掉# ,但是页面刷新 会进入 nginx的 404页面。
其实只需要在nginx 中配置文件中,server下配置如下内容:

location /{
    if (!-e $request_filename) {
    rewrite ^(.)$ /index.html?s=$1 last;
	break;
    }
}
## 如果访问的不是根目录用下面方式设置 h5是我的子目录
location /h5{
    if (!-e $request_filename) {
	rewrite ^/(.) /h5/index.html last;
   	break;
    }
}

上边的location 配置 是域名或端口的根目录下配置,下边的则是二级目录
h5 是二级目录,可根据自己的项目自行修改。(原理是因为,如果访问的是h5下的,nginx 自动转到 你的项目 控制)
在router.js中,需要设置 base 为 h5,来设置为 公共地址,不被js所解析。
或者设置为 process.env.BASE_URL,在 vue.config.js 中设置 publicPath: /h5/。
各位有什么不理解的,请私信我

你可能感兴趣的:(JS,VUE,vue.js,nginx,前端)