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和端口号进行访问！

欢迎大家关注本人的微信公众号，微信公众号将不定期发送相应学习文章和教程

最后

以上就是美丽水池为你收集整理的[vue]：vue前端和node后端、通过nginx的服务器配置1、vue项目的配置2、nginx的下载和配置3、服务器node后端服务和nginx代理开启的全部内容，希望文章能够帮你解决[vue]：vue前端和node后端、通过nginx的服务器配置1、vue项目的配置2、nginx的下载和配置3、服务器node后端服务和nginx代理开启所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。