vue-ci3 环境变量

一个项目前端开发过程当中,通常会经历本地开发,测试脚本, 开发自测 ,测试环境 ,预上线环境 才能正式发布。对应每一个环境均可能有所差别,如 服务器地址,后台接口地址等。因此在环境切换时,就须要不一样的配置参数,这时候就能够使用环境变量和模式,来方便咱们管理。前端

vue-cli3总共提供了四种方式来指定环境变量

1.在根目录添加.env文件,配置全部状况下都会用到的配置(不知道这个存在的意义,全部的都须要的也就不须要配置了吧)。
2.在根目录添加.env.local文件,配置全部状况下都会用到的配置,与.env的区别是只会在本地,该文件不会被git跟踪。
能够在这文件下,设置开发api接口和rap接口vue


3.在根目录添加.env.[mode]文件,配置对应某个模式下的配置,好比:.env.development来配置开发环境的配置。webpack


4.在根目录添加.env.[mode].local文件,配置对应某个模式下的配置,与.env.[mode]的区别也只是会在本地生效,该文件不会被git跟踪。git

环境加载优先级:同一个key: .env.[mode].local > .env.[mode] > .envweb

在运行命令时为NODE_ENV赋值,去设置此时运行的应用的环境模式。
每一个模式都会将NODE_ENV的值设置为模式的名称——好比在 development 模式下 NODE_ENV 的值会被设置为 "development"vue-cli

默认状况下Vue Cli项目有三种模式,json

development:在vue-cli-service serve下,即开发环境使用
production:在vue-cli-service build 和vue-cli-service test:e2e下,即正式环境使用
test: 在vue-cli-service test:unit下使用api

在package.json服务器

{
  "scripts": {
    "serve": "vue-cli-service serve",  // vue-cli-service serve --mode development,不带mode参时默认是开发环境
    "build": "vue-cli-service build",  // vue-cli-service build --mode production,不带mode参时默认是生产环境
    "lint": "vue-cli-service lint",
   
    //本身新建一个模式:须要在项目根目录新建.env.stage1文件,在.env.stage1文件里声明变量
    //会在 stage1 模式下加载可能存在的 .env、.env.stage1 和 .env.stage1.local 文件而后构建出生产环境应用。
    "stage1" :"vue-cli-service serve --mode stage1"
  },
}

 

环境变量:测试

在.env文件中,只有以VUE_APP_开头的变量会被webpack.DefinePlugin静态嵌入到客户端侧的包中。环境变量必须以VUE_APP_开头。

 

示例:

相关文章
相关标签/搜索