个人理解:
在开发时,如果是要用到 nginx
作为 Web
转发服务器,vue
项目作为客户端,Java
项目作为后端服务器,那么最最需要注意的是 Java
项目的后端 yml
(或者是 proporties
文件)配置 参数 context-path
有可能的报错配置:(有可能在设计过程中,会忘记在某个开发设计中分配路由 /test-api
,导致失效/报错等等)
servlet:
# 这样配置前端有可能报错
context-path: /test-api/
正常配置:
servlet:
# 如下配置正常,和 nginx 配置模板相合正常运行
context-path: /
因为这会有可能导致 nginx
反向代理出现问题,nginx
配置参考模板如下:
#测试项目
server {
listen 80;
server_name localhost;
location / {
root /home/vueproject/dist;
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
location /pro-api/{
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://localhost:8080/; #后端启动的端口
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
Vue 的生产环境 .env.production
配置文件模板:
# 页面标题
VUE_APP_TITLE = 测试
# 生产环境配置
ENV = 'production'
# 生产环境路由
VUE_APP_BASE_API = '/pro-api'
Vue 的开发环境 .env.development
配置文件模板:
# 页面标题
VUE_APP_TITLE = 测试
# 开发环境配置
ENV = 'development'
# 开发环境路由
VUE_APP_BASE_API = '/dev-api'
vue.config.js
配置模板:
生产环境推演:
假设前端 Vue 的访问路由是 http://localhost:80/pro-api/test
,那么 nginx 会转发给 路由 http://localhost:8080/test
,但是如果 Java 的配置文件内的 context-path 参数 修改为 context-path: /test-api/
,那么就得用 http://localhost:8080/pro-api/test-api/test
路由了,第一个 /pro-api
被 nginx 截断,第二个/test-api/
被 Java 程序本机内部截断,最后才是 /test
这个路由,被 Java 程序的 控制器 controller
层识别。
target:
context-path: /
http://localhost:80/pro-api/test
=> http://localhost:80/test
context-path: /test-api/
http://localhost:8080/pro-api/test-api/test
=> http://localhost:8080/test-api/test
开发环境推演:
由于是开发环境,那么 /pro-api
修改为 /dev-api
经过 Vue 前端的代理功能,即 devServer 的 proxy,该代理截断了 /pro-api
,也就是转发给 target,指向的路由 http://localhost:8080/test
,同样的,本地开发环境,context-path 参数 修改为 context-path: /test-api/
,同样的是需要 http://localhost:8080/dev-api/test-api/test
路由,去访问后端服务器。在这里,devServer 内 proxy 的 pathRewrite 属性将第一个匹配到process.env.VUE_APP_BASE_API
的路由截断,即 /dev-api
,修改为 ''
空字符串,相当于被截断了。
target:
context-path: /
http://localhost:80/dev-api/test
=> http://localhost:80/test
context-path: /test-api/
http://localhost:8080/dev-api/dev-api/test
=> http://localhost:8080/dev-api/test
// vue.config.js
module.exports = {
devServer: {
// development server port 8000
host: '0.0.0.0',
port: port,
open: false, // 项目运行时自动在浏览器打开
proxy: {
[process.env.VUE_APP_BASE_API]: {
target: `http://localhost:8080`,
changeOrigin: true, // 允许跨域请求
timeout: 3*60*1000, //设置超时
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
},
}
},
disableHostCheck: true
},
}