Vue中的模式和环境变量

文章目录

• 一、介绍
• 二、配置
• • 1、环境文件
  • 2、变量使用
• 三、读取环境文件

---

一、介绍

• 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）