Spring Boot

• application.yml

server:
  port: 8000
  servlet:
    context-path: /api
......

Vue

• 生产环境的根路径为域名根路径。

• 上文说过，后端根路径约定为/api，所以.env.production文件内容：VUE_APP_BASE_API = '/api'。

• vue.config.js中：

publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',

proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://localhost:8000/api`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: '',
        },
      },
    },

Nginx

• nginx.conf

注意下方哪里应写/，哪里不应写。

http {
    ......

    # `yangtool`是随便取的代表项目的名字，8000就是Spring Boot配置的端口
    upstream yangtool {
        server  127.0.0.1:8000;
    }

    server {
        # 假设网站前端端口为`9527`，你可以改成其他任意值
        listen       9527;
        server_name  localhost;

        # '/' 就是前端根目录
        location / {
            root            E:/yangtool/vue/dist;
            index           index.html;
            # 从Vue Router官网抄的
            try_files       $uri $uri/ /index.html;
        }

        # '/api' 就是后端根目录
        location /api {
            # 这句负责映射yangtool的服务器接口，写法虽然怪异，但是就是Nginx的规定
            proxy_pass      http://yangtool/api;
        }
    }

    ......
}