Vue-Cli4反向代理的配置方法

本文最后更新于:14 天前

Vue为什么需要配置反向代理

在前后端分离的情况下前端项目也是需要单独部署到服务器上的,也就是前端项目也需要占用一个端口号,后端服务器也需要占用一个端口号,也就是说就算在同一台服务器上端口号也不是一样的,最起码要做个代理,前端项目才能发请求给后端,一台服务器上不会有跨域的问题,但实际部署中可能会遇到前端一个服务器,后端一个服务器。这个时候我们就需要设置代理来完成这样的功能了。

配置方法

编辑项目根目录下vue.config.js文件里面加上这个,如果没有就新建一个。

Vue代理注意点

在Vue项目中配置了代理,但是部署之后不生效,并且报404;

这是因为Vue配置的代理仅在本地开发下有效;

部署之后,需要:

  • 在nginx中进行配置代理
  • 或者后端配置跨域;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
module.exports = {
devServer: {
proxy: {
'/api': {
target: process.env.NODE_ENV === 'production' ? 'http://localhost:8085' : 'http://localhost:8085',
ws: true, // 这个是 开启websocket
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}

关于这个process.env.NODE_ENV

这个东西是环境变量默认是development, 共有三种,production, test,
NODE_ENV 将决定您的应用运行的模式,是开发,生产还是测试,因此也决定了创建哪种 webpack 配置。
官方文档就是最好的学习资料

vueCli配置以及环境变量地址

封面原图

以前绝地求生能看飞机里面的情况,每个人都是垂头丧气的,因为他们知道,他们中只能活下来一个人。

pubg 绝地求生


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!