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;
}
}
......
}
