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