Nginx部署vue项目 浏览器跨域，404，502解决

###1、vue项目设置
vue.config.js:

module.exports = {
    
    
    publicPath: './', //打包配置
    runtimeCompiler: true,
    devServer: {
    
      //开发环境配置
        host: '127.0.0.1', //域名
        port: 4880, //端口
        proxy: {
    
     //进行代理转发
            '/api': {
    
    
                //要解决跨域的接口的域名 
                target: 'http://*************/',
                // 是否开启本地代理 默认true; 如果接口跨域，需要进行此参数配置
                changeOrigin: true,
                //如果是https接口，需要配置这个参数
                secure: true,
                pathRewrite: {
    
    
                    '^/api': '' //重写地址
                }
            }
        }
    },
}

###2、所有得接口路径都加上/api/(可换做其他的)，我使用得是axios封装得 。axios工具类中添加

// 创建 axios 对象
const instance = axios.create({
    
    
    baseURL: '/api', // 根路径 
    timeout: 6000 // 网络延时
})

###3、将打包文件拷贝到nginx得html文件下.
###4、修改nginx得配置文件，nginx-1.24.0/conf/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;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  650000;

    #gzip  on;

    server {
    
    
        listen       8048;  //这里是监听端口
        server_name  localhost;


        location / {
    
    
			root 你打包文件在服务器存放的位置;
			index index.html;
			 add_header 'Access-Control-Allow-Origin' '*';
			try_files $uri $uri/ /index.html;  //解决刷新404
        }

		location  /api/ {
    
      //这里api对应你接口中的根路径  再axios得封装类中我是用得是api所以这里是api,注意加前后”/“
			proxy_http_version 1.1;    
			proxy_set_header Connection "";  //1-2行不配置 解决跨域后可能报错502 这里报错是nginx得问题，不是后端得
            proxy_pass http://***:14612/;  //请求接口得实际地址
            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;
            if ($request_method = OPTIONS ) {
                return 200;
            }
        }
		
		location  /images/ {  //这里是配置得我项目中得图片路径
			proxy_http_version 1.1;
			proxy_set_header Connection "";
            proxy_pass http://***********/;
            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;
            if ($request_method = OPTIONS ) {
    
    
                return 200;
            }
        }
    }


   

}

上面的nginx中得所有注释使用 ”#“ ，不是// ，我是用//是因为写文章改的。每个配置后面尽量别跟注释内容。可能会出现问题。