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

￡神魔★判官ぃ 2023-06-06 10:54 44阅读 0赞

**我们要完成通过不同命令切换不同环境对应的请求接口的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"
      }

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

NODE_ENV = 'production'
    VUE_APP_FLAG = 'prod'

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

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

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

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

**最后在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')
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，44人围观）

还没有评论，来说两句吧...

相关阅读

相关 30、接口

一、快速入门 1、 ![682aeb00fbec4c1385683d6f9c9a4ce9.png][] package interface_; publi

青旅半醒/ 2024年04月01日 19:28/ 0 赞/ 132 阅读

相关接口自动化测试——多套被测环境的切换

![在这里插入图片描述][1b0707026d5b4646916debd92536e257.jpeg_pic_center] -------------------- 文

深藏阁楼爱情的钟/ 2024年03月26日 19:00/ 0 赞/ 126 阅读

相关接口自动化测试——多套被测环境的切换

![在这里插入图片描述][907638160f6946c7b67062d2c2fb508b.jpeg_pic_center] -------------------- 文

小灰灰/ 2024年03月26日 17:42/ 0 赞/ 131 阅读

相关 anaconda环境切换

　　一、先创建一个新的虚拟环境　　conda create --name my\_test python=3.7\创建一个名称为my\_test 　　二、激活虚拟环境

缺乏、安全感/ 2023年09月24日 09:37/ 0 赞/ 132 阅读

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

我们要完成通过不同命令切换不同环境对应的请求接口的url npm run dev // 开发环境 npm run prod // 生产环境 npm run

￡神魔★判官ぃ/ 2023年06月06日 10:54/ 0 赞/ 45 阅读

相关 vue项目测试环境生产环境切换api接口前缀

-------------------- 复制build.js到test.js文件： 1:修改如下process.env.NODE\_ENV = 'production

ゞ浴缸里的玫瑰/ 2023年03月06日 05:29/ 0 赞/ 71 阅读

相关 node js window 环境升级和切换对应的版本

node 在window 下载对应的node版本的号，然后对应多下几个版本，对应解压切换版本在计算机–>属性–>高级系统设置—>环境变量—>path 里面添加

客官°小女子只卖身不卖艺/ 2023年01月17日 08:51/ 0 赞/ 269 阅读

相关快速部署vuecli3 vuecli搭建 vuecli

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

本是古典何须时尚/ 2022年12月22日 11:07/ 0 赞/ 430 阅读

相关 Spring 环境切换

原文地址（强烈建议看原文）：[https://blog.csdn.net/sllin/article/details/106867120][https_blog.csdn.ne

旧城等待，/ 2022年10月06日 11:53/ 0 赞/ 199 阅读

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

我们要完成通过不同命令切换不同环境对应的请求接口的url npm run dev // 开发环境 npm run prod // 生产环境 npm run

Myth丶恋晨/ 2022年02月16日 00:54/ 0 赞/ 124 阅读