vue history nginx

原理

利用vue-router的history模式

vue工程配置

//路由配置
new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
});

//vue.config.js下打包文件路径配置 有子路径的情况
publicPath: process.env.NODE_ENV === "production" ? "/***/" : "/",

web服务器nginx配置

• 利用nginx -t 命令找到配置文件位置；查看安装目录命令ps -ef | grep nginx
• 配置文件，相关配置参考如下代码
• 重启：nginx -s reload

server{
  listen 80;
  server_name localhost;

  location /子路径 {
    root /根路径;
    try_files $uri $uri/ /子路径/index.html last;
    index index.html;
  }
}
# root 为项目所在路径
# server_name 配置ip或域名，可以配置多个
# try_files 是添加到 index 的映射：在路由模式为 history 时用到

开发环境注意问题：history模式下开发环境配置代理时，proxy不能配置"/"，会导致刷新404问题。