多环境变量的配置

配置多环境变量

package.json 里的 scripts 配置 serve test build，通过== --mode xxx ==来执行不同环境

• 通过 == npm run serve== 启动本地 , 执行 development
• 通过 == npm run test ==打包测试 , 执行 testing
• 通过== npm run build==打包正式 , 执行 production

配置介绍

以 VUE_APP_开头的变量，在代码中可以通过 process.env.VUE_APP_访问。
  比如,VUE_APP_ENV 'development'通过process.env.VUE_APP_ENV 访问。
  除了 VUE_APP_* 变量之外，在你的应用代码中始终可用的还有两个特殊的变量NODE_ENV 和BASE_URL

在项目根目录中新建.env.*

注意：.env文件是环境配置，不允许胡乱命名

• .env.development 本地开发环境配置

• .env.staging 测试环境配

• .env.production 正式环境配置

• .env文件中的默认属性有NODE_ENV和VUE_APP_ENV

• 添加的属性名必须以 VUE_APP_ 开头，如：VUE_APP_XXX

• 可以通过process.env在任何地方访问到当前环境配置属性

获取属性

1. // process.env 会根据当前的环境，加载对应的环境变量文件中的变量
2. console.log(process.env.VUE_APP_BASE_URL)
3. axios.defaults.baseURL = process.env.VUE_APP_BASE_URL

一个项目的完成需要用户提供需求，产品经理画出原图–》ui进行设计–》前后端开始工作–》如果后端接口没有准备好，前端可以进行模拟假数据–》前后端链条–》测试阶段–》生成bug–》解决问题–》项目上线