nginx部署vue项目，路由配置，后端访问接口配置

原创已于 2023-08-22 17:43:37 修改 · 1w 阅读

36 ·

CC 4.0 BY-SA版权

文章标签：

#nginx #vue.js #运维 #javascript #js #前端 #java

于 2023-08-22 17:09:48 首次发布

1、准备一个vue项目

2、配置vue.config.js文件

<1>. 配置浏览器访问前端项目的子路径

例如：子路径为： /aaa
注：也可以不设置子路径，直接为：/
前端访问项目的子路径

<2>. 配置访问后端的接口地址

例如：后端访问接口路径为： http://192.168.3.59:8080
配置访问后端的接口地址

3.配置.env.development文件

<1>. 配置访问后台前缀子路径

例如：子路径为：“/dev-api”
注：也可以不设置后台访问前缀：即：“/”
配置访问后台前缀子路径

4. 进行vue项目打包，生成dist文件

打包生成dist文件

5. 配置nginx

<1>. 将打包的vue项目的dist文件内容复制到nginx文件夹的html文件夹中

复制dist文件中的内容到html文件中

<2>. 打开nginx文件地址，找到nginx.conf文件，使用编辑器打开

配置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;

.env.production文件配置接口访问子路径
nginx后台访问子路径配置

 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'，请求接口变更
 }