vue-cli3.0切换环境对应的api接口

最新推荐文章于 2024-07-21 23:22:20 发布

旗木夫人

最新推荐文章于 2024-07-21 23:22:20 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/weixin_41819098/article/details/89430483

本文介绍如何使用环境变量在Vue项目中配置不同环境下的API接口URL，包括开发、测试和生产环境。通过修改package.json和创建.env文件实现命令行切换环境，确保API地址正确配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文链接： https://blog.youkuaiyun.com/weixin_41819098/article/details/89430483

我们要完成通过不同命令切换不同环境对应的请求接口的url

npm run dev // 开发环境
npm run prod // 生产环境
npm run test // 测试环境

首先我们将package.json中添加配置不同命令

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

   
   1
2
3
4
5
6

然后在项目根目录新建.env文件，设置环境为生产，设置标识为prod

NODE_ENV = 'production'
VUE_APP_FLAG = 'prod'

   
   1
2

在新建.env.test文件outputDir为输出的文件目录

NODE_ENV = 'production'
VUE_APP_FLAG = 'test'
outputDir = test  

   
   1
2
3

所以可在新建一个vue.config.js

module.exports = {
  outputDir: process.env.outputDir
}

   
   1
2
3

最后在main.js中来判断当前环境为什么环境，设置对应的api

if (process.env.NODE_ENV === 'production') {
  if (process.env.VUE_APP_FLAG === 'pro') {
      //prod生产环境
      console.log('设置生产环境api接口url')
  } else {
      //test 测试环境
      console.log('测试环境api接口url')
  }
} else {
  //dev 开发环境
  console.log('开发环境api接口url')
}

   
   1
2
3
4
5
6
7
8
9
10
11
12

最后执行命令看下结果

npm run test

在这里插入图片描述

npm run dev

在这里插入图片描述

npm run prod

在这里插入图片描述

                                </div>
            <link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-e44c3c0e64.css" rel="stylesheet">
                </div>