process-env

在使用vue框架时，经常用到的俩种环境，一种是开发环境，一种是生产环境。

  • 平时开发使用的是开发环境，如果发布到线上时，需要切换为线上环境。可以通过不同配置不同的运行命令来自动切换环境。

配置环境实现原理

  • 实现原理是采用nodeJS的顶层对象中的process.env（进程环境，返回一个包含用户环境信息的对象）属性，根据各个环境的配置文件区分和切换环境

具体实例

  • 安装依赖
    npm install process
  • 创建 .env.prod and .env.dev文件 文件创建在根目录下
  • 文件内容
NODE_ENV=production
VUE_APP_API_ENDPOINT=https://api.***.com/v1
VUE_APP_STRIPE_KEY=pk_live_WtwWqDq3IGgks5Ex4Oxe***

设置项目启动时的默认环境

只要在项目启动命令后面修改需要的环境即可，

"scripts":{
	"dev":"vue-cli-service serve --mode dev",
	"prod":"vue-cli-service serve --mode prod"
}

*在main.js中打印当前环境，输出
*console.log（process.env.NODE_ENV)

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。