使用Vue，必然是前后端分离的构建，难以避免的会遇到跨域的问题，这里会使用Nginx进行反向代理解决跨域问题。
关于Nginx的安装不多赘述，自行百度即可。
一、打包Vue项目
//通过该命令将vue项目打包
npm run bulid
打包完成后，会生成一个dist文件夹，这就是我们需要的东西，将其放到nginx的html文件夹下，完成初步工作。
打包文件.png
二、修改nginx配置
这一步是我们实现项目运行和代理的关键。
打开nginx下conf文件夹下的nginx.conf文件，在这里进行nginx的核心配置。
server {
listen 8089; //nginx的访问端口，改完后即通过此端口访问项目
server_name localhost;//这个保持不变即可
location / {
try_files $uri $uri/ /index.html;//划重点，这一步能使用户访问Vue时刷新界面不至于404，即是正常的实现了vue的history路由功能
root /usr/local/nginx/html/dist;//将默认访问根节点定位到项目目录，即是我们之前拷贝过来的Vue项目。
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'; //支持请求方式
add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
}
location /api{//配置代理，和开发时的devServer中配置保持一致即可，如有多个即配置多个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服务
sudo ./nginx
//关闭nginx服务
sudo ./nginx -s stop
