VUE项目使用.env文件配置全局环境变量

时间:2022-07-24
本文章向大家介绍VUE项目使用.env文件配置全局环境变量,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

文件名

关于文件名:必须以如下方式命名,不要乱起名,也无需专门手动控制加载哪个文件

.env 全局默认配置文件,不论什么环境都会加载合并

.env.development 开发环境下的配置文件

.env.production 生产环境下的配置文件

内容

注意:属性名必须以VUE_APP_开头,比如VUE_APP_URL VUE_APP_XXX

文件的加载

根据启动命令vue会自动加载对应的环境,vue是根据文件名进行加载的,所以上面说“不要乱起名,也无需专门控制加载哪个文件”

比如执行npm run serve命令,会自动加载.env.development文件

注意:.env文件无论是开发还是生成都会加载的公用文件

配置package.json文件可以具体设置启动具体加载哪个.env.XXX文件

"scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "dev:prod": "vue-cli-service serve --mode production",
    "dev:test": "vue-cli-service serve --mode test",
    "dev:kunpeng": "vue-cli-service serve --mode kunpeng",
    "build:prod": "vue-cli-service build --mode production",
    "build:test": "vue-cli-service build --mode test",
    "build:kunpeng": "vue-cli-service build --mode kunpeng",
    "build:dev": "vue-cli-service build --mode development",
    "build:stage": "vue-cli-service build --mode staging",
    "preview": "node build/index.js --preview",
    "lint": "eslint --ext .js,.vue src",
    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
    "new": "plop"
  },

"dev:kunpeng": "vue-cli-service serve --mode kunpeng",

"dev:kunpeng": "vue-cli-service serve --mode kunpeng" 启动的时候就会加载.env.kunpeng文件。

.env文件都要加载如果两个文件有相同一个项,后加载文件会覆盖第一个文件。