Vue + Nginx 使用子目录部署上线

配置前的访问路径：https://xx.xx.com/#/

配置后的访问路径：https://xx.xx.com/web/#/

一、vue cli部分的配置

vue cli项目中需要对两个地方进行配置，，具体配置如下：

1.配置router/index.js路由：取消mode:history路由模式，设置base:'/web/',配置如下：

const router = new Router({
  // mode: "history", // 去掉url中的#  // 
  base: '/web/',// 配置nginx发布时候的子目录
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes,
});

2.配置vue.config.js中的文件打包路径，将publicPath: process.env.NODE_ENV === "production" ? "/web/" : "/",生产环境中的publicPath:"/web/"，配置如下：

module.exports = {
  // 部署生产环境和开发环境下的URL。
  // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
  // 例如 https://www.925i.cn/。如果应用被部署在一个子路径上，
  // 你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.925i.cn/web/，
  // 则设置 baseUrl 为 /web/。
  publicPath: process.env.NODE_ENV === "production" ? "/web/" : "/",
  // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
  outputDir: "dist",
  // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
  assetsDir: "static",
  
  // 此处省略无关代码...
}

二、nginx部分的配置

server {
  listen       80;
  server_name  ip;
  index        index.html;
  # 省略其他配置
  
  location / {
    root   /home/html/app;
    index  indx.html index.htm;
    try_files $uri $uri/ /app/web/index.html;
    # 省略其他配置
  }
  
  # 二级目录配置--重点
  location /web/ {
    alias     /home/html/app/web/;
    index     indx.html index.htm;
    try_files $uri $uri/ /app/web/index.html;
    # 省略其他配置
  }
  
}