vue跨域、打包后index也为空白、Nginx反向代理

vue跨域代理配置

新版的vue-cli取消了vue.config.js配置文件 需要自己在根目录下创建

module.exports = {
//把静态文件打包放到static下
    assetsDir: 'static',
    parallel: false,
    //打包后index也为空白
    publicPath: './',
    devServer: {
        open: true,
        host: 'localhost',
        port: 8080,
        https: false,
        //以上的ip和端口是我们本机的;下面为需要跨域的
        proxy: {//配置跨域
            '/api': {
                target: 'http://********/',//这里后台的地址模拟的;应该填写你们真实的后台接口
                ws: true,
                changOrigin: true,//允许跨域
                pathRewrite: {
                    '^/api': ''//请求的时候使用这个api就可以
                }
            }

        }
    }
}

Nginx反向代理

• 根据 配置的跨域文件配置、下面的网址一定要加/ proxy_pass http://********/;

server
    {
        listen 888;
        server_name 42.193.47.144;
        index index.html;
        root  /www/server/nginx/dist;
         //配置路由
         try_files $uri $uri/ @router; 
            location ~ /tmp/ {
                return 403;
            }
          //配置代理根据 vue跨域配置
        location /api {
                proxy_set_header   Host             $host;
                proxy_set_header   x-forwarded-for  $remote_addr;
                proxy_set_header   X-Real-IP        $remote_addr;
                proxy_pass http://********/; 
        }    
         //配置代理根据 vue跨域配置
 //配置路由
   location @router {
     rewrite ^.*$ /index.html last;
   }