VUE配置proxy代理、开发环境、测试环境、生产环境

您所在的位置：网站首页 › vue3开发环境怎么关闭devtools配置 › VUE配置proxy代理、开发环境、测试环境、生产环境

VUE配置proxy代理、开发环境、测试环境、生产环境

2024-07-13 05:33| 来源: 网络整理| 查看: 265

VUE配置proxy代理、开发环境、测试环境、生产环境前端开发过程中，我们经常会碰到跨域的问题，下面我们来配置下，不同的环境下，统一的跨域问题解决。

1、根目录下新建三个环境的配置文件，.env.development（开发环境）.env.test（测试环境）.evn.production（生产环境

2、开发环境 .env.development

# 开发环境 NODE_ENV = 'development' # 开发环境，api前缀 VUE_APP_BASE_API = '/api' #开发环境，Url地址 VUE_APP_BASE_RUL = 'http://xxxxxxxxxxxxx:8081/

测试环境 .env.test

# 测试环境 NODE_ENV = 'test' # 测试环境，api前缀 VUE_APP_BASE_API = '/test-api' #测试环境，Url地址 VUE_APP_BASE_RUL = 'http://xxxxxxxxxxx:8081/'

生产环境 .env.production

# 生产环境 NODE_ENV = 'production' # 生产环境，api前缀 VUE_APP_BASE_API = '/prod-api' #生产环境，Url地址 VUE_APP_BASE_RUL = 'http://xxxxxxxxxx:8081/'

说明：proxy在服务器中会失效，所以，需要再服务器中配置nginx，不然，会出现404错误

3、vue.config.js 配置

// webpack-dev-server 相关配置 devServer: { // 设置代理 host: '0.0.0.0', // port: 80, //自定义端口 https: false, //false关闭https，true为开启 open: true, //自动打开浏览器 proxy: { [process.env.VUE_APP_BASE_API]: { //同济医院地址 target: process.env.VUE_APP_BASE_RUL, // 如果要代理 websockets ws: true, changeOrigin: true, pathRewrite: { //重写路径，这种是没有我们定义的前缀 ['^' + process.env.VUE_APP_BASE_API]: '' } } } },

4、axios 配置baseURL

baseURL: process.env.VUE_APP_BASE_API

5、package.json 配置打包、启动

"serve": "vue-cli-service serve", //启动 "build:test": "vue-cli-service build --mode test", //测试 "build:prod": "vue-cli-service buil

【本文地址】

VUE配置proxy代理、开发环境、测试环境、生产环境

VUE配置proxy代理、开发环境、测试环境、生产环境

今日新闻

推荐新闻