使用Nginx部署前后端分离的Vue项目。使用同一个IP+端口，通过不同项目前缀实现部署。如从http://127.0.0.1直接跳转项目变成http://127.0.0.1/myProject

1. 修改vue.config.js文件

• 找到  module.exports ={} 代码块。
• 修改 publicPath: process.env.NODE_ENV === "production" ? "/myProject" : "/",

2. 修改.env.production文件，这个文件是打包部署时需要配置的文件

# 生产环境

ENV = 'production'

VUE_APP_BASE_API = '/myProject/prod-api'

3.修改/src/router/index.js文件，加上base: '/myProject'

export default new Router({

  base: '/myProject/',

  mode: 'history', // 去掉url中的#

  scrollBehavior: () => ({ y: 0 }),

  routes: constantRoutes

})

4.修改nginx安装目录下的nginx.conf文件

server { 
    listen 80; 
    server_name bjjzpxxdc; 

    # 访问前端的请求
    location /myProject { 
        alias /etc/nginx/myProject/; 
        index index.html index.htm; 
        try_files $uri $uri/ /myProject/index.html; 
    } error_page 500 502 503 504 /50x.html; 

    # 访问后端的请求，此处与第2步，VUE_APP_BASE_API = '/myProject/prod-api' 要一致
    location /myProject/prod-api/ { 
        proxy_set_header Host $http_host:8080; 
        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://127.0.0.1:8080/; 
    } 
}

5.重启nginx

# 直接重启

systemctl reload nginx

# 或者是先关闭在打开

systemctl stop nginx
systemctl start nginx