前言

Vue-Cli 允许我们在项目根目录创建.env.[mode]文件来设置一些打包编译的启动参数,通过执行脚本的时候加mode参数,指定不同环境需要加载的配置文件

形如: .env.prod

NODE_ENV='production'
VUE_APP_PATH='./'
VUE_APP_RUNTIME='prod'

问题

怎么在 .env.prod 文件中添加注释呢?

分析

这要看vue是怎么解析 .env.prod 文件的

通过启动脚本参数 --mode prod,一路找到了处理 .env.prod 文件的逻辑,让我们一块看下

path:node_modules\@vue\cli-service\lib\Service.js

const dotenv = require('dotenv');

// ...

loadEnv (mode) {
const logger = debug('vue:env')
const basePath = path.resolve(this.context, `.env${mode ? `.${mode}` : ``}`)
const localPath = `${basePath}.local` const load = envPath => {
try {
const env = dotenv.config({ path: envPath, debug: process.env.DEBUG })
dotenvExpand(env)
logger(envPath, env)
} catch (err) {
// only ignore error if file is not found
if (err.toString().indexOf('ENOENT') < 0) {
error(err)
}
}
} load(localPath)
load(basePath) // by default, NODE_ENV and BABEL_ENV are set to "development" unless mode
// is production or test. However the value in .env files will take higher
// priority.
if (mode) {
// always set NODE_ENV during tests
// as that is necessary for tests to not be affected by each other
const shouldForceDefaultEnv = (
process.env.VUE_CLI_TEST &&
!process.env.VUE_CLI_TEST_TESTING_ENV
)
const defaultNodeEnv = (mode === 'production' || mode === 'test')
? mode
: 'development'
if (shouldForceDefaultEnv || process.env.NODE_ENV == null) {
process.env.NODE_ENV = defaultNodeEnv
}
if (shouldForceDefaultEnv || process.env.BABEL_ENV == null) {
process.env.BABEL_ENV = defaultNodeEnv
}
}
}

从上面的代码,可以得知,vue使用dotenv解析 .env.prod 文件,并将环境变量从 .env[mode] 文件中加载到 process.env 环境变量中

解决(dotenv)

dotenv插件已经被 Vue-Cli 集成了

GitHub地址

README.md 中有这么一段话:

  • “# marks the beginning of a comment (unless when the value is wrapped in quotes)”

这就是我们要找的,在.env.[mode] 文件中,可以使用 # 进行注释

使用测试

  1. path: .env.prod 参数配置
NODE_ENV='production'
# VUE_APP_PATH='/pc/'
VUE_APP_PATH='./'
VUE_APP_RUNTIME='prod'
  1. package.json 文件脚本命令配置--mode参数
"scripts": {
"build": "vue-cli-service build --mode prod",
},
  1. 执行 npm run build 命令,输出如下:
NODE_ENV=== production
VUE_APP_PATH=== ./

本文到此为止,要想了解更多dotenv请自行探索,感谢观看


我是 甜点cc

热爱前端,也喜欢专研各种跟本职工作关系不大的技术,技术、产品兴趣广泛且浓厚,等待着一个创业机会。主要致力于分享实用技术干货,希望可以给一小部分人一些微小帮助。

我排斥“新人迷茫,老人看戏”的现象,希望能和大家一起努力破局。营造一个良好的技术氛围,为了个人、为了我国的数字化转型、互联网物联网技术、数字经济发展做一点点贡献。数风流人物还看中国、看今朝、看你我。

.env[mode]文件中如何添加注释的更多相关文章

  1. 使用VAssistX给文件和函数添加注释-2015.12.31

    在Visual Studio使用VAssistX助手可以非常方便的给文件和函数添加注释,增加更多的记录信息,从而方便在时间久后,对代码阅读理解的提示,以及别人后续对代码的维护和BUG修改. 添加头文件 ...

  2. vs code中自动添加注释插件koroFileHeader

    github链接及教程: https://github.com/OBKoro1/koro1FileHeader 使用方法: 1.安装插件koroFileHeader 2.文件->首选项-> ...

  3. python练习六十二:文件处理,往文件中所有添加指定的前缀

    往文件中所有添加指定的前缀 方法一:open方法 f_r = open('text.txt') f_w = open('text_new.txt','w+') i = 0 while True: i ...

  4. (转)Eclipse中自动添加注释(作者,时间)

    方法一:Eclipse中设置在创建新类时自动生成注释  windows-->preference  Java-->Code Style-->Code Templates  code- ...

  5. Eclipse中自动添加注释

    方法一:Eclipse中设置在创建新类时自动生成注释  windows-->preference  Java-->Code Style-->Code Templates  code- ...

  6. 编写一个删除c语言程序文件中所有的注释语句

    //删除c语言程序中所有的注释语句,要正确处理带引号的字符串与字符串常量 #include <stdio.h> using namespace std; #define MAXLINE 1 ...

  7. Python文件中执行脚本注释和编码声明

    在 Python 脚本的第一行经常见到这样的注释: #!/usr/bin/env python3 或者 #!/usr/bin/python3 含义 在脚本中, 第一行以 #! 开头的代码, 在计算机行 ...

  8. 向PE文件中空白处添加代码

    // mem.cpp : 定义控制台应用程序的入口点. //PE文件从文件加载到内存,再从内存读取,然后存盘到文件 #include "stdafx.h" #include < ...

  9. Qt项目ui文件中新添加的控件在代码中不识别的问题解决

    今天在学Qt框架的信号槽,然后发现在ui中加的控件,通过ui-> 找不到,没有识别,于是上网查找了一下问题 解决方法 添加ui控件后,执行程序,退出程序,将debug目录下的ui_XXXX.h拷 ...

  10. 统计python文件中的代码,注释,空白对应的行数

    其实代码和空白行很好统计,难点是注释行 python中的注释分为以#开头的单行注释 或者以'''开头以'''结尾 或以"""开头以"""结尾 ...

随机推荐

  1. 我的第一个Socket程序-SuperSocket使用入门(三)

    本来博客都停了,不打算更了,但今天百度一个socket的问题时无意间发现第一篇的socket文章权重仅次于SuperSocket网站,顿时觉得自己6到不行,再写一篇,讨论下数据持久化的问题 去年搞那个 ...

  2. 【转】Bloom Filter布隆过滤器的概念和原理

    转自:http://blog.csdn.net/jiaomeng/article/details/1495500 之前看数学之美丽,里面有提到布隆过滤器的过滤垃圾邮件,感觉到何其的牛,竟然有这么高效的 ...

  3. Bootstrap系列 -- 15. 下拉选择框select

    Bootstrap框架中的下拉选择框使用和原始的一致,多行选择设置multiple属性的值为multiple.Bootstrap框架会为这些元素提供统一的样式风格 <form role=&quo ...

  4. gvim & vim

    安装了 GVim for Windows. 一 普通功能配置 配置文件 _vimrc 在安装目录下面. 关闭闪屏和声音提示功能: set visualbell t_vb= "关闭visual ...

  5. C# OpenFileDialog 使用

    OpenFileDialog ofd = new OpenFileDialog(); //设置标题 ofd.Title = "选择文件"; //是否保存上次打开文件的位置 ofd. ...

  6. MySQL(一)--基本语法与常用语句

    将大量数据保存起来,通过计算机加工而成的可以进行高效访问的数据集合称为数据库(Database,DB). 将姓名.住址.电话号码.邮箱地址.爱好和家庭构成等数据保存到数据库中,就可以随时迅速获取想要的 ...

  7. 前端性能优化jQuery性能优化

    一.使用合适的选择器 $("#id"); 1.使用id来定位DOM元素无疑是最佳提高性能的方式,因为jQuery底层将直接调用本地方法document.getElementById ...

  8. 错误: 找不到或无法加载主类 hello.class

    今天复习Java,弄了一个helloworld,然后发现报错了,后来发现,原来执行的时候不能在后面添加.class

  9. python进程之间修改数据[Manager]与进程池[Pool]

    #前面的队列Queue和管道Pipe都是仅仅能再进程之间传递数据,但是不能修改数据,今天我们学习的东西就可以在进程之间同时修改一份数据 #Mnager就可以实现 import multiprocess ...

  10. org.springframework.mail.MailSendException: Failed messages: javax.mail.SendFailedException: Invalid Addresses

    一.问题分析 org.springframework.mail.MailSendException: Failed messages: javax.mail.SendFailedException: ...