vue-cli3.0--多环境构建(模式和环境变量)--使用/实例

vue-cli3.0--多环境构建(模式和环境变量)--使用/实例

简介

说明

本文用实例介绍如何用vue-cli3.0配置多环境。

本文介绍的方法适用于vue-cli的这些版本：@vue/cli3.0，@vue/cli4.0。

官网网址

​​Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式：

development 模式：用于 vue-cli-service servetest 模式：用于 vue-cli-service test:unitproduction 模式：用于 vue-cli-service build 和 vue-cli-service test:e2e

可以通过--mode参数来修改默认模式。例如，在构建命令中使用开发环境变量：

vue-cli-service build --mode development

运行 vue-cli-service 命令时，所有的环境变量都从对应的环境文件中载入。如果文件不包含 NODE_ENV 变量，它的值将取决于模式。例如，在 production 模式下被设置为 "production"，在 test 模式下被设置为 "test"，默认模式是 "development"。

NODE_ENV

NODE_ENV 决定应用运行的模式，比如：是开发、生产还是测试，因此决定了创建哪种 webpack 配置。

例如：设置 NODE_ENV = "test"，Vue CLI 会创建一个优化过的、用于单元测试的 webpack 配置，它不会处理图片以及单元测试非必需的资源。

同理，NODE_ENV=development 创建一个 webpack 配置，该配置启用热更新，不会对资源进行 hash 也不会打出 vendor bundles，目的是在开发时快速重新构建。

运行 vue-cli-service build 命令时，无论要部署到哪个环境，应该始终把 NODE_ENV 设置为 "production" 来获取可用于部署的应用程序。

如果在环境中有默认的 NODE_ENV，应该移除它或在运行 vue-cli-service 命令时明确地设置 NODE_ENV。

环境变量

配置文件

可以在你的项目根目录中放置下列文件来指定环境变量：

.env

配置所有情况下都会用到的配置

.env.local

配置所有情况下都会用到的配置，但会被 git 忽略

.env.[mode]

配置对应某个模式下的配置比如：.env.development 可以配置开发环境的配置。

.env.[mode].local

配置对应某个模式下的配置，但会被 git 忽略比如：.env.development 可以配置开发环境的配置。

如果不同文件存在同名的环境变量，保留高优先级文件中的值。优先级为：.env.[mode].local > .env.[mode] > .env.local > .env

环境变量的使用

简介

一个环境文件只包含环境变量的“键=值”对，例如：

FOO=barVUE_APP_NOT_SECRET_CODE=some_value

使用方式

在项目的不同地方使用，限制不一样。 具体如下：

在项目中，也就是src中使用

必须以VUE_APP_开头。

例如：在main.js中直接输出：console.log(process.env.VUE_APP_KEY1)

NODE_ENV

环境："development"、"production" 或 "test" 中的一个。具体的值取决于应用运行的模式。

BASE_URL

和 vue.config.js 中的 publicPath 选项相符。即应用会部署到的基础路径。

在webpack配置中使用

没什么限制，可直接通过process.env.XXX使用

在public/index.html中以插值方式使用

详见：​​HTML 插值​​

解析环境文件规则的原理

​​API 密钥）！环境变量会随着构建打包嵌入到输出代码，意味着任何人都有机会能够看到它。只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量会通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。这是为了避免意外公开机器上可能具有相同名称的私钥。

嵌入的含义：在客户端代码中可以访问到这些环境变量。比如可以这样获取变量：console.log(process.env.VUE_APP_KEY1)

实例

1.创建项目

见：​​@vue/cli4--使用图形化界面创建项目--方法/实例_IT利刃出鞘的博客-CSDN博客​​

本处创建的项目为：demo_vue-cli4。创建完后如下图所示：

package.json

{ "name": "demo_vue-cli4", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { // 省略 }, "devDependencies": { // 省略 }}

2.创建环境变量文件

在项目根目录创建文件，文件名为：.env，.env.develop

.env

空白，什么都不写

.env.develop

NODE_ENV='develop'VUE_APP_ENV_INFO='这是develop环境'

3.添加模式（修改package.json）

在"scripts"里添加一项： "develop": "vue-cli-service serve --mode develop"

添加后如下所示：

{ "name": "demo_vue-cli4", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "develop": "vue-cli-service serve --mode develop" }, "dependencies": { // 省略 }, "devDependencies": { // 省略 }}

这样就新建了一个运行环境，模式名字为develop。 模式的名字develop就对应.env.develop的“develop”后缀。

4.获取配置的值（修改页面程序）

本处我修改：src/views/Home.vue

修改前：

修改后：

5.启动并测试

修改后的目录结构：

启动项目：npm run develop

它就会执行此命令：vue-cli-service serve --mode develop

启动完毕后，访问：​​http://localhost:8080/​​

结果：（获取到了环境变量值）

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。