vue index.html环境变量,vue-cli环境变量与模式
vue-cli环境变量与模式
模式
环境变量
环境文件加载优先级
示例:Staging 模式
在客户端侧代码中使用环境变量
public/index.html
只在本地有效的变量
推荐阅读
你越是认真生活,你的生活就会越美好——弗兰克·劳埃德·莱特
《人生果实》经典语录
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 配置
该配置启用热更新,
不会对资源进行 hash 也不会打出 vendor bundles
目的是为了在开发的时候能够快速重新构建。
当你运行 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 命令载入的,因此环境文件发生变化,需要重启服务。
示例:Staging 模式
假设我们有一个应用包含以下.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
public/index.html 文件是一个会被 html-webpack-plugin 处理的模板。在构建过程中,资源链接会被自动注入。
因为 index 文件被用作模板,所以你可以使用 lodash template 语法插入内容:
用来做不转义插值;
用来做 HTML 转义插值;
用来描述 JavaScript 流程控制。
除了被html-webpack-plugin 暴露的默认值之外,所有客户端环境变量也可以直接使用。例如,BASE_URL 的用法:
提示
你可以在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官网 模式和环境变量
谢谢你阅读到了最后~
期待你关注、收藏、评论、点赞~
让我们一起 变得更强
关于找一找教程网
本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[vue-cli环境变量与模式]http://www.zyiz.net/tech/detail-159298.html
vue index.html环境变量,vue-cli环境变量与模式相关推荐
- vue index.php,如何解决vue $index报错问题
vue $index报错是因为vue已经移除了原来的$index和$key用法,变成了index和key,其解决办法就是修改$index和$key为index和key即可. 本教程操作环境:windo ...
- vue index.html 缓存,解决vue单页面 回退页面 keeplive 缓存问题
场景:项目中遇到 vue 点击回退 从A页跳到B页,缓存A页,当B页状态修改再次返回A时,A页查询条件缓存不刷新,列表刷新 A页: B页: 解决方法: 利用keep-alive 缓存需要缓存的页面 1 ...
- Vue cli3配置生产环境,开发环境,和测试环境
目录 1.先在package.json文件中添加: 2.在项目目录下建立 .env文件和.env.test文件 3.配置api变量 3.1.配置axios的baseURL路径 3. ...
- vue - vue中的process.env.NODE_ENV和环境变量
1,什么是process.env process.env 是 Node.js 中的一个环境对象.其中保存着系统的环境的变量信息.可使用 Node.js 命令行工具直接进行查看.如下: 而 NODE_E ...
- cli vue 卸载,vue Cli 环境删除与重装教程 - 版本文档
vue-cli 卸载,版本选择,安装 · 检测(图文教程:vue Cli 环境删除与重装) 重要说明: vue-cli 3.0+版本,使用的不是vue-cli,而是@vue/cli: 如果用以上的安装 ...
- vue Cli 环境删除与重装 - 版本文档
文章目录 vue-cli 卸载,版本选择,安装 · 检测(图文教程:vue Cli 环境删除与重装) 重要说明: vue-cli 的 `卸载:` vue-cli 的 `安装:` Vue CLI 官方介 ...
- vue项目使用.env文件配置全局环境变量
关于文件名:必须以如下方式命名,不要乱起名,也无需专门手动控制加载哪个文件 .env 全局默认配置文件,不论什么环境都会加载合并 .env.development 开发环境下的配置文件 .env.pr ...
- vue使用process.env搭建自定义运行环境
一.vue-cli项目下默认有三种模式: development:在 vue-cli-service serve 时使用. production:在 vue-cli-service build 和 v ...
- vue-router路由、mixin混入、vue-resource、axios、计算属性watch、moment.js、vuex、vue-cli、数据双向绑定、搭建vue环境、vue实例、配置启动项
路由vue-router介绍: // 1.前端路由核心:锚点值的改变,根据不同的锚点值,渲染指定dom位置的不同数据.// 2.vue中,模板数据不是通过ajax请求的,而是调用函数获取到模板内容// ...
最新文章
- android 相机路径,android – 如何获取刚从相机捕获的图像路径
- 微软应用商店_微软自家的软件也放弃Windows 10
- Java IO: InputStreamReader和OutputStreamWriter
- 12-order by和group by 原理和优化 sort by 倒叙
- 包邮送50本畅销书,涵盖数据库、Python、机器学习等!
- Spring Boot基础学习笔记07:Spring Boot整合JPA
- LWP 轻量级线程的意义与实现
- 泡沫股价、外卖小哥要失业了?测试员还要不要进美团?一文带你了解背后真相
- CCF201703-3 Markdown(100分)【文本处理】
- Binary tree paths-深度优先遍历DFS
- Pytorch中的train和eval模式详解
- AppStore上传已经开发好的App的方法
- 中国联通517活动-沃福卡-技术分解实现方案
- json_encode转义中文问题
- 变量命名神器Codelf
- Hbuilder插入图片网页中无法显示
- 变分图自动编码器教程
- 福建师范大学网络教育学院计算机应用基础第三次作业,福建师范大学网络教育学院《计算机应用基础》第三次作业...
- 信息搜集学习--在线工具学习
- AXD 在win7 vista下 启动失败
热门文章
- Spring 中常用的设计模式对比
- Azkaban-solo模式-安装
- MapReduce-Reduce端join操作-Map阶段代码
- 列表-使用del关键字从列表删除数据
- Zookeeper_实际应用讲解
- 几个使用linux内核的系统,[科普] Linux 的内核与 Linux 系统之间的关系
- 兄弟连区块链教程Fabric1.0源代码分析Peer peer根命令入口及加载子命令一
- 通过OWA修改密码,提示输入的密码不符合最低安全要求
- 《无人机DIY》——4.2 项目1:MakerBeam机身
- Python2 之 print函数示例