vue-cli3环境变量和子环境打包方法示例

第一步是理解环境变量的概念。

我们可以用根目录中的以下文件指定环境变量：env #在所有环境中加载。env.local #在所有环境中都被加载，但被git忽略。环境。[mode] #仅在指定模式下加载。环境。[模式]。local #仅在指定模式下加载，但被git忽略。环境变量文件只包含“key=value”对环境变量：

FOO=barVUE_APP_SECRET=secret //项目代码中只能直接使用VUE_APP_开头的环境变量。除了用户定义的VUE_APP_*变量之外，还有两个特殊变量在您的应用程序代码中始终可用：

NODE _ ENV-可以是“开发”、“生产”或“测试”之一。具体值取决于应用程序运行的模式。BASE _ URL-将匹配vue.config.js中的publicPath选项，也就是您的应用程序将要部署的基本路径。为特定模式(例如env.production)准备的环境文件将比一般环境文件(例如。env)。

模式概念：

模式是Vue CLI项目中的一个重要概念。一般来说，Vue CLI项目有三种默认模式：

开发模式为vue-cli-service服务生产模式、vue-cli-service构建模式和vue-CLI-service test : e2etest模式。单元模式不等同于NODE_ENV，一个模式可以包含多个环境变量。也就是说，每个模式都将NODE_ENV的值设置为模式的名称(可以通过重新分配来更改)——。例如，在开发模式中，NODE_ENV的值将被设置为“开发”。

通过向。env文件。例如，如果创建名为。env.development在项目根目录下，这个文件中声明的变量将只在开发模式下加载。

您可以通过传递- mode选项参数来重写命令行的默认模式。例如，如果您想在build命令中使用开发环境变量，请添加：

开发-构建' : ' vue-CLI-服务构建-模式开发'，使用环境变量：

只有以VUE_APP_开头的变量会被webpack静态地嵌入到客户端的包中(即在项目代码中使用)。定义替换.您可以在应用程序代码中访问它们，如下所示：

console . log(process . env . vue _ app _ secret)了解指令、模式和环境变量之间的关系

我们经常在项目的package.json中看到以下说明

在一个vue-cli项目中，@vue/cli-service安装了一个名为vue-cli-service的命令。您可以在npm脚本中以vue-cli-service的形式或以。/node _ modules/。来自终端的服务。

服务服务

用法：vue-CLI-service serve[options][entry]选项：-服务器启动时打开以打开浏览器-服务器启动时将URL复制到剪贴板-模式指定环境模式(默认：开发)-主机指定主机(默认：0.0.0) -端口指定端口(默认：8080)-https使用https(默认：false)

服务构建

用法：vue-CLI-service build[options][entry | pattern]选项：- mode指定环境模式(默认值：production) - dest指定输出目录(默认值：dist) -为现代浏览器自动回滚的现代构建应用程序-targetapp | Lib | wc | wc-async(默认值：app)-名称库中的名称或Web Components模式(默认值：package.json或entry文件名中的“name”字段)- no-clean在构建项目前不清除目标目录-Report生成report.json以帮助分析包内容-Report-JSON生成报告json to。

以上是两个常见的cli指令，默认分别对应开发和生产模式。如果您想了解其他说明，可以访问： https://cli.vuejs.org/zh/guide/cli-service.html#cli-服务命令行界面服务。

然后，我们开始创建封装测试环境的模式；

修改package.json

添加一行命令

测试' : ' vue-CLI-服务构建模式测试'添加环境测试文件

创建一个。项目根路径中的env.test文件，包含以下内容

NODE_ENV='production' //表示这是一个生产环境(需要打包)。VUE_APP_CURRENTMODE='test' //表示生产环境模式信息。Vue _ app _ baseurl=' http://* * *。* * * *.com :8000//测试服务器地址修改项目中的api

在我的项目中，我通常创建一个api.js来管理所有的接口URL

因为我们在本地开发环境中通过代理连接到服务器，所以将url写为

`$ { baseUrl }/API/v1/log in `，通过环境变量更改文件开头的baseURl

让baseUrl=if(process . ENV . node _ ENV==' development '){ baseURl=' ' } Else if(process . ENV . node _ ENV==' production '){ baseURl=process . ENV . vue _ APP _ baseURl } Else { baseURl=' ' }当我们需要打包测试环境时，我们只需要运行以下指令来打包它

Npm运行测试以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。