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

  • Post author:
  • Post category:vue




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",
  },



注意事项

  • 一定要注意 每个接口单独的配置文件中的内容

    • 注释 使用 #
    • 单双引号有区别 建议都使用 双引号

在这里插入图片描述



版权声明:本文为dccose原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。