基于Vite+vue3+ts的环境变量和模式工作实战开发配置

基于Vite+vue3+ts的环境变量和模式工作实战开发配置

引言

随着前端工具链的不断发展，Vite 已经成为了现代Web开发中不可或缺的一部分。它以其快速冷启动、即时热更新等特性赢得了开发者们的青睐。本文将详细讲解如何在基于 Vite 的项目中使用环境变量与不同模式进行实战开发配置。

环境变量

在传统的 Web 构建工具中，如 webpack，我们通常需要安装额外的插件来处理环境变量。而在 Vite 中，这一切变得更加简单和直观。Vite 支持通过 .env 文件定义环境变量，并自动将这些变量加载到 import.meta.env 对象中，以便在整个应用中访问。

定义环境变量

为了保证安全性和灵活性，Vite支持以下几种 .env 文件：

• .env: 所有环境中都会加载的基础环境变量。
• .env.local: 本地环境中加载的环境变量（不会被 Git 提交）。
• .env.[mode]: 特定模式下加载的环境变量，如 .env.development 或 .env.production。
• .env.[mode].local: 特定模式下的本地环境变量（不会被 Git 提交）。

所有的环境变量必须以前缀 VITE_ 开始，例如：

VITE_APP_SERVICE_URL=https://api.xxxxx.com

这使得你可以轻松地在代码中获取这些值：

console.log(import.meta.env.VITE_APP_SERVICE_URL);

模式 --mode

Vite 默认支持两种模式：

• development：用于开发阶段，默认启动时使用。
• production：用于生产阶段，默认构建时使用。

默认情况下，开发服务器(dev命令)运行在development(开发模式)，而(build命令)则运行在production(生产模式)，当执行vite build的时候，它会自动加载.env.production中可能存在的环境变量，执行 vite dev的时候，它会自动加载.env.development中存在的环境变量。

你可以通过命令行参数指定模式：

# 启动开发服务器，使用 development 模式
vite

# 构建项目，使用 production 模式
vite build

# 也可以通过 --mode 参数显式指定模式
vite --mode staging
vite build --mode staging

在某些情况下，若想在 vite build 时运行不同的模式来渲染不同的标题，你可以通过传递 --mode 选项标志来覆盖命令使用的默认模式。 例如，如果你想在 staging （预发布）模式下构建应用： 第一步、项目根目录下新建一个 .env.staging 文件：

# .env.staging
VITE_APP_BASE_API=/staging-api

第二步、在 package.json 中添加一个staging选项运行 vite --mode stagin 命令

"scripts": {
"staging": "vite --mode staging",
}

第三步、启动项目，查看 console.log(import.meta.env.VITE_APP_BASE_API) 打印结果

npm run staging

工作项目实战

第一步、配置环境变量

开发环境请求后台接口获取数据，不同环境请求的URL不一样，所以要为不同环境匹配不同请求接口URL，通过路径前缀进行匹配。 在项目根目录下创建 .env.development 和 .env.production文件 文件内容分别为： 测试：在 request.ts 中添加以下代码，看下浏览器控制台是否会输出

console.log(import.meta.env.VITE_APP_BASE_API)

注意：为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的环境变量才会通过 import.meta.env 以字符串形式暴露给经过 Vite 处理的代码使用。

第二步、重构代理配置

重构 vite.config.ts 中的 server.proxy代理配置。 问题：在 vite.config.ts 中无法通过 import.meta.env.xxx 获取到 VITE_ 环境变量。 解决：需要用到 vite 提供的 loadEnv 方法来读取环境变量。

import { defineConfig, loadEnv } from 'vite'

向 defineConfig 传递对象改为传递方法，并返回配置对象，代码注释如下：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

// 向 defineConfig 传递对象改为传递方法，并返回配置对象
export default defineConfig(({ mode }) => {
  // mode：获取 --mode 指定的模式，process.cwd()项目根目录,下面 `env` 相当于 `import.meta.env`
  const env = loadEnv(mode, process.cwd())
  return {
    // 开发服务器选项
    server: {
      port: 8080, // //端口号， 如果端口号被占用，会自动提升1
      open: true, //启动服务时自动打开浏览器访问
      host: '0.0.0.0',
      proxy: {
        // 匹配以env.VITE_APP_BASE_API开头的请求，交给代理服务器转换到目标接口
        [env.VITE_APP_BASE_API]: {
          // 代理后的目标地址
          target: env.VITE_APP_SERVICE_URL,
          // 开启代理，是否允许跨域
          changeOrigin: true,
          // /dev-api/xxx => xxx, 将 env.VITE_APP_BASE_AP 替换为 '',也就是 /dev-api 会移除
          rewrite: (path) => path.replace(/^\/dev-api/, '')
        }
      }
    },
    plugins: [
      vue(),
    ],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    }
  }
})

第三步、配置request.ts文件

修改 utils/request.ts 文件,配置： baseURL: import.meta.env.VITE_APP_BASE_API

第四步、重启项目，检查配置是否起效果

npm run dev

效果：

环境变量和模式配置并使用成功。

完结

以上就是基于Vite的环境变量和模式配置的一个实战指南。根据项目的具体需求，你可以进一步定制和扩展这些配置。