- 本人最近在找工作，有推荐的小伙伴私我，不胜感激。
一、介绍
- vue官网：https://cli.vuejs.org/zh/guide/mode-and-env.html
- 模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式
- 开发环境：development 模式
- 测试环境：test 模式
- 生产环境：production 模式
二、配置
1、环境文件
-
在项目的根目录下创建文章来源：https://www.toymoban.com/news/detail-819356.html
# 该文件内的变量在所有的环境中都会加载 .env # 开发环境文件，本地开发时默认读取该文件变量 .env.development # 测试环境文件 .env.staging # 生产环境文件，打包时默认读取该文件变量 .env.production -
环境文件中的变量格式是：文章来源地址https://www.toymoban.com/news/detail-819356.html
- 只能以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"
}
到了这里，关于Vue中的模式和环境变量的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
