- 本人最近在找工作,有推荐的小伙伴私我,不胜感激。
一、介绍
- 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"
}