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/。
各位有什么不理解的,请私信我