.env在mode文件中如何添加注释详解

目录
  • 前言
  • 问题
    • 分析
  • 解决（dotenv）
    • 使用测试

前言

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

形如： .env.test

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

问题

怎么在 .env.test 文件中添加注释呢？

分析

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

通过启动脚本，一路找到了处理 .env.test 文件的逻辑，让我们一块看下

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.test 文件，并将环境变量从 .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] 文件中，可以使用 # 进行注释

使用测试

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

NODE_ENV=== production
VUE_APP_PATH=== ./

以上就是.env在mode文件中如何添加注释详解的详细内容，更多关于.env在mode文件添加注释的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • vue项目多环境配置(.env)的实现

    vue项目多环境配置(.env)的实现

    目录 什么是多环境配置,为什么要多环境配置? .env 文件配置到哪里 .env文件如何配置,配置多少个? .env文件的配置 如何配置运行环境 如何获取全局配置项的值 如何运行环境 没接触多环境配置前,感觉好高大上,真正操作后感觉也就那么回事,在此把自己遇到的问题和解决方案叙述一下,有不对的地方欢迎各位大佬指出. 什么是多环境配置,为什么要多环境配置? 最常见的多环境配置,就是开发环境配置,和生产环境配置(也就是上线的配置),很多情况下我们开发环境下的域名,和一些配置项,和我们生产模式下的不同

  • vue项目使用.env文件配置全局环境变量的方法

    关于文件名:必须以如下方式命名,不要乱起名,也无需专门手动控制加载哪个文件 .env 全局默认配置文件,不论什么环境都会加载合并 .env.development 开发环境下的配置文件 .env.production 生产环境下的配置文件 关于文件内容: 注意:属性名必须以VUE_APP_开头,比如VUE_APP_XXX .env: .env.development: 关于文件的加载: 根据启动命令vue会自动加载对应的环境,vue是根据文件名进行加载的,所以上面说"不要乱起名,也无需专门控制加

  • Vue中.env、.env.development及.env.production文件说明

    Vue中.env、.env.development及.env.production文件说明

    目录 0.介绍 2.命名规则 3.关于文件的加载: 4.关于使用 4.1 在.vue文件中使用 4.2 在.js文件中 5.自定义环境 总结 0.介绍 模式是Vue CLI项目中一个重要的概念,默认情况下,一个Vue CLI项目有三种模式: developemt 模式用于vue-cli-service serve test 模式用于vue-cli-service test:unit production 模式用于vue-cli-service build 和vue-cli-service tes

  • 如何设置process.env.NODE_ENV生产环境模式

    在开始之前我先强调一下: process.env.NODE_ENV默认只有两种状态即development和production,development指代本地开发即localhost环境(本地的开发),而production代表发布在任何服务上的服务(不管是dat.uat还是生产环境),node是不知道你服务是测试还是正式,除非你手动指定.通常认为都是线上环境.所以可以这样认为development代表本地开发环境,production代表线上环境(包括dat.uat和生产环境等) 我为什么会

  • .env在mode文件中如何添加注释详解

    目录 前言 问题 分析 解决(dotenv) 使用测试 前言 Vue-Cli 允许我们在项目根目录创建.env.[mode]文件来设置一些打包编译的启动参数,通过执行脚本的时候加mode参数,指定不同环境需要加载的配置文件 形如: .env.test NODE_ENV='production' VUE_APP_PATH='./' VUE_APP_RUNTIME='prod' 问题 怎么在 .env.test 文件中添加注释呢? 分析 这要看vue是怎么解析 .env.test 文件的 通过启动脚

  • C语言在头文件中定义const变量详解

    C语言在头文件中定义const变量详解 在头文件中定义const不会有多变量的警告或错误,如果该头文件被大量包含会造成rom空间的浪费. 通过查看*.i文件的展开呢,可以发现每个.i文件都会有相应的变量展开. 查看*.map文件,能查看到该变量的多个地址分配. 在预编译的时候如果在头文件定义了const变量,每一个包含该头文件的c文件都会将其展开,而在编译的时候不会报错,因为这符合语法规则,每一个包含这个头文件的*.c文件都会编译一次这个变量,分配一个新的地址,然后在链接的时候也不会报错,因为每

  • C#如何给PPT中图表添加趋势线详解

    C#如何给PPT中图表添加趋势线详解

    目录 前言 1.实现方法 2.关于PPT类库安装:可直接通过Nuget搜索安装到程序. 总结 前言 本文内容分享通过C#程序代码给PPT文档中的图表添加数据趋势线的方法. 支持趋势线的图表类型包括二维面积图.条形图.柱形图.柱形图.股价图.xy (散点图) 和气泡图中:不能向三维.堆积.雷达图.饼图.曲面图或圆环图的数据系列添加趋势线.可添加的趋势线类型包括6种,即多项式(Polynomial)趋势线.指数(Exponential)趋势线.线性(Linear)趋势线.对数(Logarithmic

  • JScript中的条件注释详解

    JScript 可以使用以下语句根据条件编译变量的值控制脚本的编译.既可以使用 JScript 提供的变量,也可以使用 @set 指令或 /define 命令行选项定义自己的变量. @cc_on   激活条件编译支持.   @if   根据表达式的值,有条件地执行一组语句.   @set   创建使用条件编译语句的变量.   @cc_on.@if 或 @set 语句激活条件编译.条件编译的一些典型用途包括在 JScript 中使用新功能.将调试支持嵌入到一个脚本中以及跟踪代码执行. 当编写由 W

  • vue3中vue.config.js配置及注释详解

    vue3中vue.config.js配置及注释详解

    目录 报错 打包时提示文件过大,配置解决方案,如下 总结 报错 asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).This can impact web performance.entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit

  • Java 添加、删除、格式化Word中的图片步骤详解( 基于Spire.Cloud.SDK for Java )

    本文介绍使用Spire.Cloud.SDK for Java提供的ImagesApi接口来操作Word中的图片.具体可通过addImage()方法添加图片.deleteImage()方法删除图片.updateImageFormat()格式化Word中的图片以及getImageFormat()获取Word中的图片格式等.操作方法和代码示例可参考下文中的步骤. 步骤1:导入jar文件 创建Maven项目程序,通过maven仓库下载导入.以IDEA为例,新建Maven项目,在pom.xml文件中配置m

  • java中压缩文件并下载的实例详解

    当我们对一些需要用到的资料进行整理时,会发现文件的内存占用很大,不过是下载或者存储,都不是很方便,这时候我们会想到把文件变成zip格式,即进行压缩.在正式开始压缩和下载文件之前,我们可以先对zip的格式进行一个了解,然后再就具体的方法给大家带来分享. 1.ZIP文件格式 [local file header + file data + data descriptor]{1,n} + central directory + end of central directory record 即 [文件

  • C++头文件algorithm中的函数功能详解

    目录 1. 不修改内容的序列操作 (1)all_of (2)any_of (3)none_of (6)find_if (7)find_if_not (8)find_end (10)adjacent_find (12)count_if (15)is_permutation (16)search 2. 修改内容的序列操作 (1)copy (2)copy_n (3)copy_if (4)copy_backward (5)move (6)move_backward (7)swap (8)swap_ran

  • Linux ftp 命令行中下载文件get与上传文件put的命令应用详解

    介绍:从本地以用户anok登录的机器192.168.0.16上通过ftp远程登录到192.168.0.6的ftp服务器上,登录用户名是peo.以下为使用该连接做的实验. 查看远程ftp服务器上用户peo相应目录下的文件所使用的命令为:ls,登录到ftp后在ftp命令提示符下查看本地机器用户anok相应目录下文件的命令是:!ls.查询ftp命令可在提示符下输入:?,然后回车. 1.从远程ftp服务器下载文件的命令格式: get  远程ftp服务器上当前目录下要下载的文件名  [下载到本地机器上当前

  • C语言中文件常见操作的示例详解

    目录 文件打开和关闭 文件写入 文件读取 fseek函数 ftell函数 Demo示例 解决读取乱码 FILE为C语言提供的文件类型,它是一个结构体类型,用于存放文件的相关信息.文件打开成功时,对它作了内存分配和初始化. 每当打开一个文件的时候,系统会根据文件的情况自动创建一个FILE结构的变量,并填充其中的信息,使用者不必关心细节. 一般都是通过一个FILE的指针来维护这个FILE结构的变量,这样使用起来更加方便. 文件打开和关闭 C语言的安全文件打开函数为_wfopen_s和_fopen_s

随机推荐