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)
相关推荐
我命由我123457 分钟前
Vue 开发问题:Missing required prop: “value“
开发语言·前端·javascript·vue.js·前端框架·ecmascript·js
16年上任的CTO7 分钟前
一文讲清楚React中的key值作用与原理
前端·javascript·react.js·react key
快起来别睡了13 分钟前
Vue 中组件的生命周期与 v-if、v-show 的区别详解
前端·vue.js
阳火锅16 分钟前
在生产环境下,你真的有考虑到使用数组方法的健壮性吗?
前端·javascript·面试
孤月葬花魂27 分钟前
JavaScript 中的 Promise API 全面解析
前端·javascript
几道之旅28 分钟前
Electron 应用打包全指南
前端·javascript·electron
shushushu32 分钟前
Web如何自动播放音视频
前端·javascript
帅夫帅夫37 分钟前
前端存储入门:Cookie 与用户登录状态管理
前端·架构
陈随易40 分钟前
程序员的新玩具,MoonBit(月兔)编程语言科普
前端·后端·程序员
傻球43 分钟前
前端实现文本描边
前端·canvas