背景：

构建脚手架过程中，新增axios库封装请求接口时，在@/api/index.js 文件添加如下配置：

import axios from "/node_modules/.vite/deps/axios.js?v=db5a89d3";

const baseURL = process.env.BASE_API; // API地址
const timeout = 5000; // 超时时间

// 创建 Axios 实例
const service = axios.create({
  baseURL,
  timeout,
});

export {
  service as axios
}

现象：

项目成功的跑起来，页面一片空白，打开控制台报错 ReferenceError: process is not defined，结果如下：

原因分析：

环境变量通常可以从 process.env 获得。

注意 Vite 默认是不加载 .env 文件的，因为这些文件需要在执行完 Vite 配置后才能确定加载哪一个，举个例子，root 和 envDir 选项会影响加载行为。不过当你的确需要时，你可以使用 Vite 导出的 loadEnv 函数来加载指定的 .env 文件。

修改vite构建配置文件的共享配置，

define

• 类型： Record<string, string>

  定义全局常量替换方式。其中每项在开发环境下会被定义在全局，而在构建时被静态替换

可以参考官网，在vite.config.js 配置中使用环境变量：

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ command, mode }) => {
  // 根据当前工作目录中的 `mode` 加载 .env 文件
  // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
  const env = loadEnv(mode, process.cwd(), '')
  return {
    // vite 配置
    define: {
      __APP_ENV__: JSON.stringify(env.APP_ENV),
    },
  }
})

解决： 

我将构建过程改为情景配置，参考如下代码：

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

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

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  // 根据当前工作目录中的 'mode' 加载 .env 文件
  // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 'VITE_' 前缀。
  const env = loadEnv(mode, process.cwd(), '')
  return {
    plugins: [
      vue(),
    ],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },
    css: {
      preprocessorOptions: {
        less: {
          javascriptEnabled: true,
          modifyVars: {}
        },
      },
    },
    server: {
      host: '0.0.0.0',
      port: 8099
    },
    // vite 配置
    define: {
      __APP_ENV__: JSON.stringify(env.APP_ENV),
      'process.env': env
    },
    build: {
      minify: 'terser',
      terserOptions: {
        compress: {
          drop_console: true,
          drop_debugger: true
        }
      }
    }
  }
})

修改前后对比如下：