.env文件配置

1,009 阅读1分钟

最近在学习.env文件配置,这内容要是有啥不对,请各位佬指出一下,好让小弟修改。

一、.env文件说明

  1. .env ——— 全局默认配置文件,无论什么环境都会加载载入
  2. .env.development ——— 指定开发环境的配置文件,当serve运行会默认触发此文件
  3. .env.production ——— 指定生产环境的配置文件,当build运行会默认触发此文件

image.png

不要乱命名,按上面格式命令,否则会读取不到文件

二、内容格式

image.png

image.png

  • 键值对形式创建,命名必须VUE_APP_开头
  • 例如:VUE_APP_BASE_URL = "192.0.0.1"
  • NODE_ENV将决定你的应用运行模式,是开发还是生产,也决定了对应的webpack配置。

三、执行

  • vue会根据启动命令自动加载相对应的环境配置文件。vue是根据文件名进行加载的。
  • 例如:执行npm run serve命令,会自动加载.env.development文件
  • 开发环境加载.env.env.development
  • 生产环境加载.env.env.production
  • 运行npm run serve的时候主要还是看package.json文件中server属性里--mode后面跟的是啥。如果是development,就会加载.env.development文件。在package.json里面配置好,serve的时候用开发环境,build打包用生产。
"scripts": {
    "serve": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build --mode production",
}

注意: 当全局的配置文件和环境的配置文件有相同配置项时,环境的配置项会覆盖全局的配置项。

四、使用

在其他文件里可以通过process.env.XXX来访问在.env文件里配置的属性。 image.png