Vue中的模式和环境变量

文章目录


一、介绍

  • 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:
    js 复制代码
    //打印一下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)
相关推荐
邵洛几秒前
前端导出excel表格并修改导出表格样式
前端
风舞几秒前
JavaScript 核心概念及代码示例的梳理
前端
学长学姐我该怎么办2 分钟前
从零开始学前端html篇2
前端·html
尘世中一位迷途小书童3 分钟前
从零实现 Canvas 图形拖拽:让你的网页动起来!
前端
mrsk4 分钟前
JavaScript之变量的解构赋值全面解析(●'◡'●)
前端·javascript·面试
归于尽5 分钟前
回调函数在Node.js中是怎么执行的?
前端·javascript·node.js
浏览器API调用工程师_Taylor9 分钟前
Look my eyes 都2025年了,你还不会将重复的事情自动化?
前端·javascript·爬虫
袁煦丞13 分钟前
安卓开发者的救星Docker-Android:cpolar内网穿透实验室第651个成功挑战!
前端·程序员·远程工作
zhaocarbon14 分钟前
vue2 echarts中国地图、在地图上标注经纬度及标注点
前端·javascript·echarts
咔咔咔索菲斯26 分钟前
Vue 中mounted 生命周期钩子的执行时机和 v-for 的渲染顺序
前端·javascript·vue.js