使用环境变量

Vue3 一百个案例总目录

配置 package.json

环境变量配置如下图所示，注意 dev 与 env：

声明环境变量

dev 环境：

# .env.dev

NODE_ENV=development

VITE_API_BASE=http://127.0.0.1:8000/api

prod 环境：

# .env.prod

NODE_ENV=production

VITE_API_BASE=/api

使用环境变量

import axios, { type AxiosRequestConfig, AxiosHeaders } from 'axios';
const API_BASE = import.meta.env.VITE_API_BASE;

export const request = axios.create({
    baseURL: API_BASE,
    timeout: 3000,
    headers: {
        'Content-Type': 'application/json',
    }
});

这样配置之后，npm run dev 与 npm run build 就会自动的选择 API_BASE，用起来很方便。

修复环境变量问题

你的项目在构建后可能会报类似 process is not defined 的错误，可以尝试用如下方法修复：

// vite.config.ts
import { fileURLToPath, URL } from 'node:url'

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

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const envConfig = loadEnv(mode, './env')
  return {
    plugins: [vue(), vueJsx()],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },
    // 修复 process 报错
    define: {
      'process.env': process.env
    }
  }
})