vue自动切换测试和线上环境配置

最新推荐文章于 2024-12-13 17:20:57 发布

G_XUI

最新推荐文章于 2024-12-13 17:20:57 发布

阅读量676

点赞数

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.youkuaiyun.com/G_XUI/article/details/108113735

本文介绍如何在Vue项目中分离开发和测试环境配置，通过安装cross-env插件和修改webpack配置实现不同环境变量的动态切换。具体步骤包括：1. 将环境配置从env.js分离至config文件夹下；2. 安装并配置cross-env插件；3. 创建vue.config.js文件并配置环境变量。

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

一、首先

将统一的环境分开例如：

在这里插入图片描述
原本在 env.js 文件里的开发环境和测试环境

分别写到config文件夹 dev.js 和 prod.js里

第二步

再安装cross-env插件： npm install cross-env -D
之后在这里插入图片描述
分别在运行和打包的指令分别配置测试和生产（加深绿色代码段）

第三步

项目目录创建vue.config.js 文件
配置

chainWebpack : config => {
    config.plugin("define").tap(args => {
      args[0]["process.env"].BUILD_ENV = JSON.stringify(process.env.BUILD_ENV);
      return args;
    });
  }
  其中process.env是args中的常量  BUILD_ENV是自定义的名