vue-router history mode nginx 配置方式

环境情况

• vue-cli 4.X
• nginx 1.21.X
• system: macos

一个域名、多个项目

域名/地址：www.yourDomain.com

项目 A：projectA（最终打包出来的文件夹名称）

项目 B：projectB（最终打包出来的文件夹名称）

想要最终的访问方式：

• www.yourDomain.com/projectA
• www.yourDomain.com/projectB

默认 vue-router 会配置如下：

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL, // process.env.BASE_URL 指向的地址可以在 vue.config.js 中的 publicPath 配置，老的版本是 baseUrl
  routes,
});

export default router;

再来看一下 vue.config.js 的配置

// projectA
module.exports = {
  publicPath: "/projectA", //
  outputDir: "projectA",
  // ...
};

// projectB
module.exports = {
  publicPath: "/projectB", //
  outputDir: "projectB",
  // ...
};

接着来配置 nginx

location /projectA {
    index  index.html index.htm;
    try_files $uri $uri/ /projectA/index.html;
}

location /projectB {
    index  index.html index.htm;
    try_files $uri $uri/ /projectB/index.html;
}

保存配置，重启 nginx 或者重新加载 nginx 配置

$ nginx restart

# or

$ nginx -s reload

一个域名、一个项目

域名/地址：www.yourDomain.com

项目：project（最终打包出来的文件夹名称）

首先 vue-router 的文件不用动，去修改 vue.config.js 的 publicPath

module.exports = {
  publicPath: "/", //
  outputDir: "project",
  // ...
};

nginx 中配置

location / {    
  root /usr/local/var/www;  # 项目在服务器上的真实路径
  index  index.html index.htm;
  try_files $uri $uri/ @rewrites; 
} 
        
location @rewrites {
  rewrite ^(.*)$ /index.html last;
}

原文链接：https://www.jianshu.com/p/2ddb5983c04f