Vue3配置环境变量

发表于 更新于 分类于 阅读次数：

使用场景

在做项目中经常用到axios去发送请求，也通常会把axios进行一个封装去使用，axios中使用baseURL字段去配置请求的基础路径，如： 

1
2
3
4
5
6
const http = axios.create({
    baseURL: 'http://test-www.baidu.com'
})

// 请求http://test-www.baidu.com/api接口
http.get('/api')

这样可以使我们在去调用接口时可以不用填写基础路径的繁琐以及统一修改请求的基础路径的配置。但是往往开发环境和生产环境所需要请求不同的基础路径，如开发是请求的基础路径是http://test-www.baidu.com，而生产是调用的是基础路径是https://www.baidu.com。

解决方案

一、每次提交代码前就手动修改axios的baseURL字段。如：在开发阶段就把baseURL字段改成http://test-www.baidu.com,在生成阶段把baseURL字段改成https://www.baidu.com。这样做的话每次都会很繁琐，而且有时候会出现忘记的情况。

二、使用环境变量

  1. 根目录下创建.env.development、.env.production。
    .env.development文件配置如下
1
2
3
4
//模式
VITE_MODE_NAME=development
// 设置环境变量VITE_BASE_URL
VITE_BASE_URL='http:test-www.baidu.com'

.env.production配置如下:

1
2
3
4
//模式
VITE_MODE_NAME=development
// 设置环境变量VITE_BASE_URL
VITE_BASE_URL='https://www.baidu.com'

如果项目使用了ts的话，可以创建env.d.ts文件进行ts类型声明。 

1
2
3
4
5
// src/types/env.d.ts
interface ImportMetaEnv {
  VITE_BASE_URL: string
}

  1. 在axios中使用import.meta.env获取环境变量。 
    1
    2
    3
    4
    5
    6
    const http = axios.create({
        baseURL: import.meta.env.VITE_BASE_URL
    })

    // 请求http://test-www.baidu.com/api接口
    http.get('/api')
  2. package.json中进行配置打包命令：
    1
    2
    3
    4
    5
    6
    7
    "scripts": {
        // 本地开发环境
        "dev": "vite --mode development",
        // 生产使用的环境变量
        "build": "vite build --mode production",
      },

    PS: 这种方法用于个人的项目，只用生产环境，没有测试环境的情况，如果有两套环境的话，也可以使用package.json配置这个方法，只不过很麻烦。可以用jenkins去直接配置好环境变量等等，方法去做。
相关博客