1、准备一个vue项目
2、配置vue.config.js文件
<1>. 配置浏览器访问前端项目的子路径
例如:子路径为: /aaa
注:也可以不设置子路径,直接为:/
<2>. 配置访问后端的接口地址
例如:后端访问接口路径为: http://192.168.3.59:8080
3.配置.env.development文件
<1>. 配置访问后台前缀子路径
例如:子路径为:“/dev-api”
注:也可以不设置后台访问前缀:即:“/”
4. 进行vue项目打包,生成dist文件
5. 配置nginx
<1>. 将打包的vue项目的dist文件内容复制到nginx文件夹的html文件夹中
<2>. 打开nginx文件地址,找到nginx.conf文件,使用编辑器打开
<3>. 配置监听浏览器的端口
例如:监听端口号为8888
<4> 配置访问前端系统的子路径
以子路径"/aaa" 为例
如果子路径为配置:即为:“/”
location /aaa { # 在浏览器里面加入访问前缀
alias F:/xx/yyy/front/dist; #这里用alias而不用root,dist的文件路径
index index.html index.htm;
try_files $uri $uri/ /index.html last;
}
<5> 配置后端请求接口路径
以访问后端接口子路径"/dev-api" 为例 ,即.env.development中的配置
如果子路径为配置:即为:“/”
location /dev-api/ { #后端访问子路径,项目.env.development中的配置
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://192.168.3.59:8080; #后端访问接口
}
6. 重启nginx
双击nginx.exe
7. 浏览器访问:localhost:8888/aaa,即为前端项目
备注:
如果.env.production文件下面配置了接口访问子路径VUE_APP_BASE_API = ‘/bbb’, 则配置的nginx文件的后端访问接口需要加上 /bbb, 即:proxy_pass
http://192.168.3.59:8080/bbb;
location / { # 当.env.development文件中的VUE_APP_BASE_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://192.168.3.59:8080/bbb; #当.env.production文件中的VUE_APP_BASE_API = '/bbb',请求接口变更
}