Nginx Vue前后端分离接口地址配置（区分开发模式和生产模式）https

Vue.js进阶文章列表

Nginx文章列表

完整案例图解：前后端分离项目的Nginx部署

下面的配置准备实现：

1 浏览器使用https 的443端口访问Nginx服务端；

2 使用安全证书；

3 统一前端的跨域为Nginx的443端口；

4 前端在调用后端api的时候Vue的axios增加api前缀，Nginx里在去掉；

5 Nginx优先过滤请求中包含/api/的接口，这正是Nginx代理的8001里的Java Spring Boot Web接口

前端Vue

1 代码中增加开发模式和生产模式的区分：

//生产环境会访问Nginx中的443/api，Nginx会去掉api;
//开发环境直接访问/路径，这个路径由下面的配置文件config/index.js代理到另一个8001的路径
axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? 'https://10.60.32.61:443/api' : "/"  

2 开发模式增加跨域代理：

前端Windows版本

  dev: {
    env: require('./dev.env'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: { //代理，这个主要是因为开发模式是用Node提供的，用了代理以后，浏览器访问会来到这里转发到真正的后端接口
      "/": {
        target: 'http://10.60.32.61:8001', // 局域网测试机
        secure: true, // 如果是https接口，需要配置这个参数
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
        // ws: true,
        pathRewrite: {
          "^/": "/"
        }
      }
    },
    host: 'localhost', // 开发模式下浏览器IP地址
    // host: '10.60.32.61', // 发布到局域网测试机
    port: 8090, // 开发模式下浏览器端口号
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',
    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,
    cssSourceMap: true
  },

部署Nginx Linux版本

    server {
        #默认80，现在改为前端Vue端口8090; 增加ssl证书配置
        listen       443 ssl;
        server_name  ***lab.xxxxee.com;

        ssl_certificate     /usr/nginx-1.18.0/conf/cert/4399811_***lab.xxxxee.com.pem;
        ssl_certificate_key /usr/nginx-1.18.0/conf/4399811_***lab.xxxxee.com.key;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #使用该协议进行配置。
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4; #使用此加密套件。
        ssl_prefer_server_ciphers    on;
        #charset koi8-r;

        #access_log  logs/host.access.log  main;
	
	#前端Vue对后端的请求会故意加上api子路径，从而到这里代理到后端服务接口
        location /api/ { 
            #本机上运行的后台服务
            proxy_pass http://139.224.30.89:8001/;
        }
        location / {
            #这里的html是指Nginx自己的html文件夹，到时候把前端代码放到这里就可以了；这里的root是指Nginx的跟目录
            root   /usr/nginx-1.18.0/html;#这里使用了绝对路径
            index  index.html index.htm;
        }