Nginx 部署 VUE 项目

此方式的 vue router 模式是 mode: ‘history’

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;
        # 启动预压缩功能，对所有类型的文件都有效，优先找到 xx.gz 的文件
    gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    # 启动预压缩功能，对所有类型的文件都有效，优先找到xx.gz 的文件
    gzip_static on;
    # 找不到预压缩文件，进行动态压缩
      gzip on;
    location / {
        # 一些跨域的配置，按自己情况删减与保留
        add_header Access-Control-Allow-Methods *;
        add_header Access-Control-Max-Age 3600;
        add_header Access-Control-Allow-Credentials true;
        add_header Access-Control-Allow-Origin $http_origin;
        add_header Access-Control-Allow-Headers $http_access_control_request_headers;
        try_files $uri $uri/ /index.html;
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        # html 页面不缓存，达到的效果是：直接按 F5 刷新页面，就可以拉取到最新的 js（否则只有强刷才能拉取到更新后的项目）
        if ($request_filename ~* .*\.(?:htm|html)$) {
         add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
        } 
    }
    # 拦截 /api 开头的地址，并且将 /api 去掉再转发
    location ^~ /api/ {
        rewrite    /api/(.*) /$1 break;
        proxy_pass http://host-api;
        client_max_body_size 500M;
      # 如果需要在后端项目中获取到客户端的真实 IP，可以如下配置
      # 详细看这个地址：https://www.yuque.com/mrcode.cn/note-combat/bqlmxw
      proxy_set_header Host $host;
      proxy_set_header REMOTE-HOST  $http_x_forwarded_for;
      proxy_set_header X-Real-IP          $remote_addr:$remote_port;
      proxy_set_header X-Forwarded-Host   $http_host;
      proxy_set_header X-Forwarded-Proto  $scheme;
      proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
    }
}

关于 nginx location 的规则解析请看 这篇文章

而关于 vue-cli 中启用 gzip 预压缩的配置如下，在 vue.config.js 配置如下

const CompressionPlugin = require('compression-webpack-plugin')
// 在根目录下创建 .env.local 文件，增加一行 VUE_APP_DEV_SERVER_PROXY_TARGET = http://localhost:9504
// 目标地址填写你要连接的后端服务地址即可
const VUE_APP_DEV_SERVER_PROXY_TARGET = process.env.VUE_APP_DEV_SERVER_PROXY_TARGET
module.exports = {
  productionSourceMap: process.env.NODE_ENV === 'development',
  devServer: {
    port: 9531,
    proxy: {
      '/api': {
        target: VUE_APP_DEV_SERVER_PROXY_TARGET,
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
        }
      }
    }
  },
  /**
   * <pre>
   *   参考：https://www.jianshu.com/p/1738f9f092ee
   *   yarn add -D compression-webpack-plugin
   *   核心配置：
   *    gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
   *    # 启动预压缩功能，对所有类型的文件都有效，优先找到xx.gz 的文件
   *    gzip_static on;
   *    # 找不到预压缩文件，进行动态压缩
   *    gzip on;
   * </pre>
   * @param config
   * @return {{plugins: *[]}}
   */
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [
          // 开启 gzip 压缩
          new CompressionPlugin({
            test: /\.jpg$|\.png$|\.js$|\.html$|.\css$/, // 匹配文件名
            threshold: 2120, // 对超过 2k 的数据压缩
            deleteOriginalAssets: false // 不删除源文件
          })
        ]
      }
    }
  }
}