网站怎么赚钱的,网站兼容设置,摄影素材库网站,外贸婚纱网站 侵权文章目录 一、介绍二、配置1、环境文件2、变量使用 三、读取环境文件 一、介绍
vue官网#xff1a;https://cli.vuejs.org/zh/guide/mode-and-env.html模式是 Vue CLI 项目中一个重要的概念。默认情况下#xff0c;一个 Vue CLI 项目有三个模式 开发环境#xff1a;develop… 文章目录 一、介绍二、配置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 /api2、变量使用
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.productionnpm vue-cli-service build 验证打开打包后的/js/app.2cf8c3f2.js搜索baseUrl会查找出create({baseURL:“/api”,timeout:8e3})通过baseURL的值就可以验证 打测试包读取.env、.env.stagingvue-cli-service build --mode staging
