Vue中的模式和环境变量

• 本人最近在找工作，有推荐的小伙伴私我，不胜感激。

一、介绍

• vue官网：https://cli.vuejs.org/zh/guide/mode-and-env.html
• 模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式
  • 开发环境：development 模式
  • 测试环境：test 模式
  • 生产环境：production 模式

二、配置

1、环境文件

• 在项目的根目录下创建

  # 该文件内的变量在所有的环境中都会加载
  .env
  
  # 开发环境文件，本地开发时默认读取该文件变量
  .env.development
  
  # 测试环境文件
  .env.staging
  
  # 生产环境文件，打包时默认读取该文件变量
  .env.production
  

• 环境文件中的变量格式是：

  • 只能以VUE_APP_开头
  • 大写
  • 下划线分割
  • key = value

  VUE_APP_TITLE = 管理系统
  VUE_APP_BASE_API = '/api'
  

2、变量使用

• process变量是node.js提供的全局变量，无需引入，直接使用
• env代表的是环境文件，也就是上面的4个环境文件
• process.env对象会自动携带2个属性
  • NODE_ENV：模式
  • BASE_URL：

  //打印一下process.env
  {
      NODE_ENV: 'development',
      BASE_URL: '/',
      VUE_APP_TITLE: '管理系统',
      VUE_APP_BASE_API: '/api'
  }
  
  // 创建axios，使用环境文件中的变量VUE_APP_BASE_API
  const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_API,
    timeout: 60000
  })
  

三、读取环境文件

• 在本地开发环境下默认会读取.env、.env.development（启动项目时npm vue-cli-service serve）
• 打包默认会读取.env、.env.production（npm vue-cli-service build）
  • 验证：打开打包后的/js/app.2cf8c3f2.js，搜索baseUrl，会查找出create({baseURL:“/api”,timeout:8e3})，通过baseURL的值就可以验证
• 打测试包读取.env、.env.staging（vue-cli-service build --mode staging）

四、package.json

• 根据三读取环境变量文件，我们可以把命令写入package.json的scripts中，方便我们使用

"scripts": {
    "dev": "vue-cli-service serve",
    "build:prod": "vue-cli-service build",
    "build:stage": "vue-cli-service build --mode staging",
    "lint": "vue-cli-service lint"
}