vuecli3打包部署到nginx，跨域问题处理

vuecli3打包部署到nginx，跨域问题处理

一、vuecli3后目录的build和config文件夹都没有了，大部分合成在vue.config.js，具体配置看 https://cli.vuejs.org/zh/config

1. 其中常见的跨域处理：

devServer: {
   proxy: {
     '^/proxy': {
       target: 'http://127.0.0.1:8100',
       changeOrigin: true,
       pathRewrite: {
         '^/proxy': ''
       }
     },
   }
 },

2. 接口请求：

Vue.http.post(`${/proxy}/login/auth`).then()

3. 打包：
   npm run build

二、打包后访问会出现跨域问题，接下来使用Nginx反向代理实现ajax进行跨域访问：

1. 首先去nginx下载http://nginx.org/en/download.html，解压到文件夹中（不含中文）
2. 接着打开conf文件夹，右键选择nginx.conf编辑
3. 编辑server内容为↓

server {
        listen       8085;#监听端口
        server_name  localhost;#代理服务地址

        add_header Access-Control-Allow-Origin *;

        location / {
            root H:/newCom/ofpms/static; #根目录!!,把这里路径设置为项目的根路径
            autoindex on;       #开启nginx目录浏览功能
            autoindex_exact_size off;   #文件大小从KB开始显示
            charset utf-8;          #显示中文
            add_header 'Access-Control-Allow-Origin' '*'; #允许来自所有的访问地址
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #支持请求方式
            add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
        }

        #开始配置我们的反向代理
        location /proxy{
           rewrite ^/proxy/(.*)$ /$1 break;
           include uwsgi_params;
           proxy_set_header   Host             $host;
           proxy_set_header   x-forwarded-for  $remote_addr;
           proxy_set_header   X-Real-IP        $remote_addr;
           proxy_pass  http://127.0.0.1:8100;
        }

        location @router {
            rewrite ^.*$ /index.html last;
        }
    }

4. 再把打包好的文件夹放到nginx下的html文件夹里

常见nginx命令：

start nginx.exe //启动nginx
nginx.exe -s reload //重载配置
nginx.exe -s stop //快速停止
nginx.exe -s quit //完整有序停止

如果已经打开Nginx,请使用命令重载配置,①停止->②重载配置->③启动

---

nginx: [error] CreateFile() “E:\nginx\nginx-1.9.3/logs/nginx.pid” failed
nginx: [error] Open() “E:\nginx\nginx-1.9.3/logs/nginx.pid” failed
解决方法:
使用命令创建/logs/nginx.pid文件:
nginx -c conf/nginx.conf

---

在浏览器中输入 http://localhost:8085/即可实现跨域访问