nginx配置vue3反向代理
2021/07/16    

vue3

vue.config.js配置注意host和disableHostCheck两项

host:'127.0.0.1',//https://blog.csdn.net/qq_36407748/article/details/80739787

disableHostCheck: true,//vue-cli3出现Invalid Host header的解决方案

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
  assetsDir: 'static',
  productionSourceMap: false,
  css: {
    requireModuleExtension: true,
    extract: process.env.NODE_ENV === 'production'
  },
  configureWebpack: config => {
    Object.assign(config, {
      externals: {
        gasApp:'gasApp'
        //解决文件过大
        // Swiper:'Swiper',
        // $:'jQuery'
      },
      plugins: [
       // new UglifyJsPlugin()
      ]
    });
  },
  devServer: {
    host:'127.0.0.1',//https://blog.csdn.net/qq_36407748/article/details/80739787
    disableHostCheck: true,//vue-cli3出现Invalid Host header的解决方案
    overlay: {
        warnings: false,
        errors: false
    }
  },
  lintOnSave: process.env.NODE_ENV !== 'production'
}


nginx配置

注意 proxy_buffering off;这个需要配置为off不然加载会很慢

server {
        listen       80;
        server_name  www.test.cn test.cn;
        location / {
            index  index.html index.htm index.php;
            proxy_buffering off;
            proxy_pass   http://127.0.0.1:8080;
            proxy_set_header Host $proxy_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
}
  gzip on;
  gzip_min_length  1k;
  gzip_buffers     4 32k;
  gzip_http_version 1.1;
  gzip_comp_level 8;
  gzip_types       text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
  gzip_vary on;
  gzip_disable "MSIE [1-6].";