超级简单！vite.config.js 中使用process 获取环境变量

2023-02-06 06:54:27

在 Vite + Vue + TS 项目中获取 process 对象

前言

在 Vite、Vue 和 TypeScript 结合构建的项目中，获取 process 对象可能会成为一个挑战。本文将通过一个简单的多环境配置来解决这个问题，帮助你轻松获取 process 中的内容。

获取 process 对象的步骤

第一步：导出一个带有参数的函数

在 vite.config.js 文件中，将导出函数设置为接收参数：

export default ({ mode }) => {
  // mode 为开发模式(development)或生产模式(production)
  console.log(mode);
};

第二步：使用 process.env 获取环境变量

导入 defineConfig 和 resolve 模块，并使用 process.env 获取环境变量：

import { defineConfig } from 'vite';
import { resolve } from 'path';

// Define the config
export default defineConfig({
  plugins: [],
  // Use the process.env variable here to get the environment variables
  define: {
    'process.env': process.env,
  },
  // Add the environment variable to Vite's config
  envDir: './.env',
  // Add the Vite config to the root directory
  root: resolve(__dirname),
});

第三步：在 TypeScript 文件中输出环境变量

在你的 .ts 文件中，输出 process.env 中的环境变量：

// In your .ts file
console.log(process.env.NODE_ENV); // Outputs "development" or "production"

注意事项：

要在 JavaScript 中使用，可以用 global.process.env 来获取。
这个方法也可以获取其他环境变量，如 NODE_ENV 和 BASE_URL。

代码示例

vite.config.js

import { defineConfig } from 'vite';
import { resolve } from 'path';

export default defineConfig({
  plugins: [],
  define: {
    'process.env': process.env,
  },
  envDir: './.env',
  root: resolve(__dirname),
});

.env

NODE_ENV=development
BASE_URL=http://localhost:3000

main.ts

import { createApp } from 'vue';

createApp({
  data() {
    return {
      env: process.env.NODE_ENV,
      baseUrl: process.env.BASE_URL,
    };
  },
}).mount('#app');