1、vue项目的配置
对于vue/cli3.x及以上版本的vue项目，其缺少配置文件，需要自己手动添加，在 该文章 中有部分说明，主要应对请求跨域的问题。对此根目录下新建vue.config.js：
module.exports={
devServer: {
proxy: {
"/xxyy": { //xxyy为访问的API的前缀
target: "http://localhost:8080",// 要访问的接口域名和端口
changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite: {
'^': '' //这里理解成用''代替target里面的所有地址
}
}
}
}
}
完成上述配置，在项目中的所有的请求中都需要加上/xxyy，例如代码：
this.$axios({
method: 'post',
url: '/xxyy/login, //带上 /xxyy 前缀API请求都会经过上述配置的跨越设置
data: ···
)}
.then(res =>{})
.catch(err => {})
对于后端的node服务，其接口的编写应该与前段一致（具体来说应该是前段请求接口的编写应该按照后端的来），及后端的API接收接口也要相应的为 /xxyy/··· 形式，node的服务打开3000端口。
2、nginx的下载和配置
Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器，同时也提供了IMAP/POP3/SMTP服务，在高连接并发的情况下，Nginx是Apache服务器不错的替代品。
官网下载 后直接解压复制到服务器，打开nginx/conf/ningx.conf进行修改：
server {
listen 8080; #前端访问开的端口号
server_name localhost; #如果是服务器上直接写 localhost 或者 127.0.0.1
location / { #页面访问配置
root dist; #这里使用的是相对路径，也可以使用绝对路径
index index.html; #默认打开的文件
}
location /xxyy { #后端端口请求的配置
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Nginx-Proxy true;
proxy_set_header Connection "";
proxy_pass http://127.0.0.1:3000/xxyy/; #后台接口的代理路径
}
}
3、服务器node后端服务和nginx代理开启
对于后端的node服务，我们可以做直接在终端输入法如下命令开启服务：
node app.js
但是对于单线程的node来说一旦出现异常或者崩溃就会导致服务停止无法访问。对此，我们可以通过第三方库pm2避免：
npm install pm2 -g
在node的项目目录下启动终端执行下面命令开启服务：
pm2 start app.js
对于nginx的启动，进入到nginx文件夹下打开终端，输入：
start nginx
打开资源管理器发现有 nginx.exe 服务说明nginx已经启动。至此你可以在任何浏览器输入服务器的ip和端口号进行访问！
欢迎大家关注本人的微信公众号，微信公众号将不定期发送相应学习文章和教程
