vue.config.js中的devServer proxy配置（本地开发环境代理后端接口）

最新推荐文章于 2024-05-28 16:29:13 发布

c_reshape

最新推荐文章于 2024-05-28 16:29:13 发布

阅读量1.7k

点赞数

分类专栏： vue 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_45346457/article/details/125404313

版权

vue 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js项目中的vue.config.js配置，包括publicPath、devServer、proxy等关键设置，以及生产环境中Nginx的代理配置，用于实现跨域请求和不同服务间的路由转发。通过这些配置，可以确保前端应用在开发和部署时能够正确地与后端服务交互。

摘要由CSDN通过智能技术生成

module.exports = {
  publicPath: '/publish',
  devServer: {
    open: true,
    hot: true,
    compress: true,
    disableHostCheck: true,
    proxy: {
      '/': {
        target: `http://<host>:<port>/`,
        changeOrigin: true, //跨域
        secure: false, // 使用的是http协议则设置为false，https协议则设置为true
        ws: true,
      },
    },
  },
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {
            'primary-color': '#2A77EC',
            'link-color': '#1DA57A',
            'border-radius-base': '2px',
          },
          javascriptEnabled: true,
        },
      },
    },
  },
  chainWebpack: (config) => {
    config.plugin('html').tap((args) => {
      args[0].title = 'xxx';
      return args;
    });
  },
  configureWebpack: (config) => {
    config.devtool = process.env.NODE_ENV === 'development' ? 'source-map' : 'none';
  },
};

生产环境用nginx代理，nginx.conf内容如下：


#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;
	
	client_header_buffer_size 10240k;
    large_client_header_buffers 6 10240k;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;
	proxy_cache_path ../cache levels=1:2 keys_zone=tile:10m max_size=10g inactive=60m use_temp_path=off;
    server {
        listen       8089;
        server_name  localhost;
		
		#配置跨域
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Headers X-Requested-With;
        add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
		
		location /manage {
              proxy_pass http://localhost:8080/manage/;
	    		 
              proxy_set_header   Host             $host; 
              proxy_set_header   X-Real-IP        $remote_addr; 
              proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for; 
        }
		
		location /manageData {
              proxy_pass http://localhost:8080/manage/manageData/;
	    		 
              proxy_set_header   Host             $host; 
              proxy_set_header   X-Real-IP        $remote_addr; 
              proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for; 
        }
		
		location /publish {
              proxy_pass http://localhost:8083/publish/;
	    		 
              proxy_set_header   Host             $host; 
              proxy_set_header   X-Real-IP        $remote_addr; 
              proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for; 
        }
		
		location /publishData {
              proxy_pass http://localhost:8083/publish/publishData/;
	    		 
              proxy_set_header   Host             $host; 
              proxy_set_header   X-Real-IP        $remote_addr; 
              proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for; 
        }
		
		
		location /commerce {
              proxy_pass http://localhost:8084/commerce/;
	    		 
              proxy_set_header   Host             $host; 
              proxy_set_header   X-Real-IP        $remote_addr; 
              proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for; 
        }
		
		location /tpl {
              proxy_pass http://localhost:8084/commerce/tpl/;
	    		 
              proxy_set_header   Host             $host; 
              proxy_set_header   X-Real-IP        $remote_addr; 
              proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for; 
        }

		location /operation {
              proxy_pass http://localhost:8085/operation/;
	    		 
              proxy_set_header   Host             $host; 
              proxy_set_header   X-Real-IP        $remote_addr; 
              proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for; 
        }
		
		location /ecoSpace {
              proxy_pass http://localhost:8086/ecoSpace/;
	    		 
              proxy_set_header   Host             $host; 
              proxy_set_header   X-Real-IP        $remote_addr; 
              proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for; 
        }
		
		location /uus/ {
              proxy_pass http://10.254.240.212:8086/uus/;
	    		 
              proxy_set_header   Host             $host; 
              proxy_set_header   X-Real-IP        $remote_addr; 
              proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for; 
        }
		
		location /api/ {
              proxy_pass http://10.254.240.212:8086/api/;
	    		 
              proxy_set_header   Host             $host; 
              proxy_set_header   X-Real-IP        $remote_addr; 
              proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for; 
        }
		
		location /business/ {
              proxy_pass http://10.254.240.212:8086/business/;
	    		 
              proxy_set_header   Host             $host; 
              proxy_set_header   X-Real-IP        $remote_addr; 
              proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for; 
        }
		
		location /system/ {
              proxy_pass http://10.254.240.212:8086/system/;
	    		 
              proxy_set_header   Host             $host; 
              proxy_set_header   X-Real-IP        $remote_addr; 
              proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for; 
        }
		
		location /geoserver/ {
              proxy_pass http://10.254.240.212:8086/geoserver/;
	    		 
              proxy_set_header   Host             $host; 
              proxy_set_header   X-Real-IP        $remote_addr; 
              proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for; 
        }
		
		
        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

vue.config.js文档：

Configuration Reference | Vue CLI🛠️ Standard Tooling for Vue.js Developmenthttps://cli.vuejs.org/config/#vue-config-js