Vue 项目 Nginx 部署在子目录

Vue 项目：vue 版本 2.6.10， 用 vue-cli 一键生成的 vue 项目，自动集成了 vue.config.js 的。

环境变量配置

在环境变量中配置子目录名称：

VUE_APP_BASE_PATH = '/my-app/'

修改 vue.config.js

vue.config.js 文件中作出 publicPath 相应改动：

module.exports = {
  publicPath: process.env.VUE_APP_BASE_PATH,
  outputDir: 'dist',
  assetsDir: 'static',
}

修改路由

路由处做修改，添加 base

const router = new Router({
  mode: 'history',
  base: process.env.VUE_APP_BASE_PATH,
  scrollBehavior: () => ({ y: 0 }),
  routes: routerMap
})

至此，Vue 项目的修改就 OK 了，dev 环境下运行项目，就可以看到 路由中已经添加了 /my-app/ 前缀。

如：http://localhost:8080/my-app/home

Nginx 配置

server {
    server_name test.host.com;

    req_status server_host;

    access_log /home/srv/log/access-manti.log nisp;
    error_log /home/srv/log/error-manti.log;

    include conf.d/Office-Gateway-IPs;
    
    location /my-app {
        proxy_pass http://127.0.0.1:9528;
    }
}