你越是认真生活,你的生活就会越美好
——弗兰克·劳埃德·莱特
《人生果实》经典语录
vue-cli3.0移除了配置文件目录
: config和build文件夹
。改为.env
自定义配置环境变量和模式
日常工作中,主要用来区分本地开发环境
,测试环境
,正式环境
的全局配置,例如服务器地址
、接口地址
、websocket地址
…… ,通过环境变量和模式,方便管理
模式是 Vue CLI 项目中一个重要的概念。
默认情况
下,一个 Vue CLI 项目有三个模式:
development 模式
用于 vue-cli-service serve
test 模式
用于 vue-cli-service test:unit
production 模式
用于 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
将决定您的应用运行的模式,是开发,生产还是测试,因此也决定了创建哪种 webpack 配置
。
例如通过将 NODE_ENV 设置为 "test"
,Vue CLI 会创建一个优化过后的,并且旨在用于单元测试的 webpack 配置
,它并不会处理图片以及一些对单元测试非必需的其他资源。
同理,NODE_ENV=development
创建一个webpack 配置
启用热更新
,目的是为了在开发的时候能够快速重新构建
。
当你运行 vue-cli-service build
命令时,无论你要部署到哪个环境,应该始终把 NODE_ENV 设置为 "production"
来获取可用于部署的应用程序。
NODE_ENV
如果在环境中有默认的 NODE_ENV,你应该移除它或在运行 vue-cli-service 命令的时候明确地设置 NODE_ENV。
你可以在你的项目根目录中放置下列文件来指定环境变量:
.env # 在所有的环境中被载入 .env.local # 在所有的环境中被载入,但会被 git 忽略 .env.[mode] # 只在指定的模式中被载入 .env.[mode].local # 只在指定的模式中被载入,但会被 git 忽略
一个环境文件只包含环境变量的“键=值”对
:
FOO=bar VUE_APP_NOT_SECRET_CODE=some_value
警告
不要在你的应用程序中存储任何机密信息
(例如私有 API 密钥)!
环境变量会随着构建打包嵌入到输出代码,意味着任何人都有机会能够看到它。
请注意,只有 NODE_ENV
,BASE_URL
和以 VUE_APP_ 开头的变量
将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中
。
这是为了避免意外公开机器上可能具有相同名称的私钥。
// .env FOO=foo BAR=bar CONCAT=$FOO$BAR # CONCAT=foobar
被载入的变量将会对 vue-cli-service 的所有命令、插件和依赖可用。
PS:
src目录下
使用环境变量的话,必须以VUE_APP_开头
。例如我们可以在src/main.js
中直接输出:console.log(process.env.VUE_APP_NOT_SECRET_CODE)
webpack配置中
使用,没限制,可以直接通过process.env.XXX
来使用为一个特定模式
准备的环境文件 (例如.env.production
) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级
。
此外,Vue CLI 启动时已经存在的环境变量拥有最高优先级,并不会被 .env 文件覆写。
.env 环境文件
是通过运行 vue-cli-service 命令载入
的,因此环境文件发生变化,需要重启服务
。
假设我们有一个应用包含以下.env 文件
:
VUE_APP_TITLE=My App
和.env.staging 文件
:
NODE_ENV=production VUE_APP_TITLE=My App (staging)
vue-cli-service build
会加载可能存在的 .env、.env.production 和 .env.production.local 文件
然后构建出生产环境应用。
vue-cli-service build --mode staging
会在 staging 模式
下加载可能存在的 .env、.env.staging 和 .env.staging.local 文件
然后构建出生产环境应用。
这两种情况下,根据 NODE_ENV
,构建出的应用都是生产环境应用,但是在 staging 版本
中,process.env.VUE_APP_TITLE
被覆写成了另一个值。
只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中
你可以在应用的代码中这样访问它们:
console.log(process.env.VUE_APP_SECRET)
在构建过程中,process.env.VUE_APP_SECRET 将会被相应的值所取代
。在 VUE_APP_SECRET=secret 的情况下,它会被替换为 “secret”。
除了 VUE_APP_* 变量
之外,在你的应用代码中始终可用的还有两个特殊的变量
:
NODE_ENV
:会是 “development
”、"production
" 或 “test
” 中的一个。具体的值取决于应用运行的模式。BASE_URL
: 会和 vue.config.js 中的 publicPath 选项相符
,即你的应用会部署到的基础路径。所有解析出来的环境变量都可以在public/index.html
中以 HTML 插值
中介绍的方式使用。
vue-cli HTML 和静态资源
public/index.html 文件
是一个会被 html-webpack-plugin 处理的模板
。在构建过程中,资源链接会被自动注入。
因为 index 文件被用作模板
,所以你可以使用 lodash template 语法插入内容:
<%= VALUE %>
用来做不转义插值;<%- VALUE %>
用来做 HTML 转义插值;<% expression %>
用来描述 JavaScript 流程控制。除了被html-webpack-plugin
暴露的默认值之外,所有客户端环境变量也可以直接使用
。例如,BASE_URL 的用法:
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
提示
你可以在vue.config.js
文件中计算环境变量。它们仍然需要以 VUE_APP_ 前缀开头
。这可以用于版本信息:
process.env.VUE_APP_VERSION = require('./package.json').version module.exports = { // config }
有的时候你可能有一些不应该提交到代码仓库中的变量
,尤其是当你的项目托管在公共仓库时。
这种情况下你应该使用一个.env.local 文件
取而代之。本地环境文件默认会被忽略,且出现在 .gitignore 中。
.local
也可以加在指定模式的环境文件上,比如.env.development.local
将会在 development 模式下被载入,且被 git 忽略。
连点成线
Vue源码学习目录
vue-cli官网 模式和环境变量
谢谢你阅读到了最后~
期待你关注、收藏、评论、点赞~
让我们一起 变得更强