vue项目配置生产、测试和开发环境不同api接口

配置不同环境变量可避免切换不同环境时手动修改项目配置,请求url

  • 开发环境:一般是本地开发时所使用的环境,改动很频繁
  • 测试环境:较为稳定的版本,一般用于部署测试
  • 生产环境:发布到线上的版本

1.创建三个配置文件 并配置相应代码

  • 在项目的根目录下创建如下三个文件
  • 开发环境 .env.development
# 开发环境
NODE_ENV=development
# 开发接口域名
VUE_APP_API_URL="http://xxx.xxx.xx.xx:xxxx"
  • 生产环境 .env.production
# 生产环境
NODE_ENV=production
# 生产环境接口域名
VUE_APP_API_URL= “http://xxx.xxx.xx.xx:xxxx”
  • 测试环境 .env.test
# 测试环境
NODE_ENV=test
# 测试环境接口域名
VUE_APP_API_URL= “http://xxx.xxx.xx.xx:xxxx”

在这里插入图片描述

2.修改 baseURL axios请求基准url路径

  • vue 项目一般配套使用 axios 进行接口请求,设置基本请求路径,让它根据环境请求不同域名下的接口
axios.defaults.baseURL = process.env.VUE_APP_API_URL
  • 运行时 输出 process.env 可以查看到当前配置信息

3.配置package.json 文件

 "scripts": {
    "serve": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build --mode production",
    "build:test": "vue-cli-service build --mode test",
  },

注意事项

  • 一定要注意 每个接口单独的配置文件中的内容
    • 注释 使用 #
    • 单双引号有区别 建议都使用 双引号

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐