文章目录
- 一、介绍
- 二、配置
- 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)