使用Vue，必然是前后端分離的構(gòu)建，難以避免的會(huì)遇到跨域的問題，這里會(huì)使用Nginx進(jìn)行反向代理解決跨域問題。
關(guān)于Nginx的安裝不多贅述，自行百度即可。
一、打包Vue項(xiàng)目

//通過該命令將vue項(xiàng)目打包
npm run bulid

打包完成后，會(huì)生成一個(gè)dist文件夾，這就是我們需要的東西，將其放到nginx的html文件夾下，完成初步工作。

打包文件.png

二、修改nginx配置
這一步是我們實(shí)現(xiàn)項(xiàng)目運(yùn)行和代理的關(guān)鍵。
打開nginx下conf文件夾下的nginx.conf文件，在這里進(jìn)行nginx的核心配置。

server {
        listen       8089; //nginx的訪問端口，改完后即通過此端口訪問項(xiàng)目
        server_name  localhost;//這個(gè)保持不變即可

        location / {
        try_files $uri $uri/ /index.html;//劃重點(diǎn)，這一步能使用戶訪問Vue時(shí)刷新界面不至于404，即是正常的實(shí)現(xiàn)了vue的history路由功能
            root   /usr/local/nginx/html/dist;//將默認(rèn)訪問根節(jié)點(diǎn)定位到項(xiàng)目目錄，即是我們之前拷貝過來的Vue項(xiàng)目。

            index  index.html index.htm;
        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'; //支持請(qǐng)求方式
            add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
        }
    
    location /api{//配置代理，和開發(fā)時(shí)的devServer中配置保持一致即可，如有多個(gè)即配置多個(gè)location
           rewrite ^/api/(.*)$ /$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://192.168.100.185:8081;
        }
}

三、Nginx命令
定位到nginx下的sbin目錄

//開啟nginx服務(wù)
sudo ./nginx
//關(guān)閉nginx服務(wù)
sudo ./nginx -s stop