Logo

菜单

Administrator
Administrator
发布于 2025-07-08 / 0 阅读

Vite的环境设置

在学习vue3的时候，想要实现根据环境来加载不同的javascript，比如开发环境下，使用模块化的非压缩的库，而生产环境，则是使用压缩后的库

比如:

开发环境下使用

<script src="https://cdn.staticfile.net/three.js/0.160.0/three.module.js"></script>

生产环境下使用

<script src="https://cdn.staticfile.net/three.js/0.160.0/three.module.min.js"></script>

解决方案是：

构建工具（如 Webpack、Vite、Rollup）支持环境变量（如 process.env.NODE_ENV），根据环境自动切换模块版本

以Vite为例，注意下面代码需要使用 vite-plugin-externals 插件：

<script src="https://cdn.staticfile.net/three.js/0.160.0/<%=isProd ? 'three.min.js' : 'three.js' %>"></script>

其中isProd其实是一个环境变量，可以在vite.config.ts文件中定义

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

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import { createHtmlPlugin } from 'vite-plugin-html';

// https://vite.dev/config/
export default defineConfig(({ mode }) => {
  //加载环境变量
  const env = loadEnv(mode, process.cwd(), 'VITE_')
  return {

    plugins: [
      vue(),
      vueDevTools(),
      createHtmlPlugin({
        inject: {
          data: {
            isProd: env.VITE_APP_ENV === 'production'
          }
        }
      })
    ],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      },
    },
  }
})

在这之前，还需要创建.env文件、.env.production、.env.development文件，这几个文件用来分别定义在通用环境、生产环境、开发环境时的自定义变量，注意npm run dev才会进入开发环境，npm run preview或者npm run prop会进入生产环境，注意进入生产环境，实际上是开启的dist打包后的文件夹路径下的网页服务，所以需要先进行npm run build重新编译之后，才可以进入生产环境，修改了代码也需要重新编译，进入不同的环境，会自动使用不同的文件（.env文件、.env.production、.env.development文件）里面的环境变量。

如果你只是希望简单判断一下目前是什么环境，可以直接使用process.env.NODE_ENV，效果是一样的，如下

 <script
    src="https://cdn.staticfile.net/three.js/0.160.0/<%=process.env.NODE_ENV==='production' ? 'three.min.js' : 'three.js' %>"></script>

但是如果你有很多其他参数，比如后端地址等等，就需要使用环境变量文件了

其他

在 Vite 项目中，.env 文件用于管理不同环境（开发、生产、测试等）的配置变量，通过 ​​环境变量前缀​​、​​文件命名规则​​ 和 ​​加载优先级​​ 实现动态配置。以下是具体使用方法及注意事项：

📂 ​​一、环境文件命名与加载规则​​

​​文件名称​​

​​加载场景​​

​​优先级​​

​​示例配置​​

.env

所有环境通用

最低

VITE_API_BASE_URL=https://api.example.com

.env.development

开发环境 (npm run dev)

中

VITE_API_BASE_URL=http://localhost:3000

.env.production

生产环境 (npm run build)

中

VITE_API_BASE_URL=https://prod-api.com

.env.[自定义模式]

通过 --mode 指定（如 staging）

最高

VITE_API_BASE_URL=https://staging-api.com

​​优先级说明​​：
同名变量按 .env → .env.[mode] 顺序加载，​​后者覆盖前者​​。

🔑 ​​二、变量定义与访问规则​​

1. ​​变量命名要求​​

  • ​​前缀限制​​：只有以 VITE_ 开头的变量才会被注入到客户端代码（如 VITE_API_URL）。

  • ​​敏感信息防护​​：避免使用 VITE_ 前缀暴露密钥、密码等敏感数据。

2. ​​代码中访问变量​​

通过 import.meta.env 对象访问环境变量：

// 获取 API 基础地址
const apiUrl = import.meta.env.VITE_API_BASE_URL;
console.log(apiUrl); // 开发环境输出：http://localhost:3000

3. ​​TypeScript 类型支持​​

在 src/env.d.ts 中声明类型：

interface ImportMetaEnv {
  readonly VITE_API_BASE_URL: string;
  readonly VITE_DEBUG: boolean;
}
interface ImportMeta {
  readonly env: ImportMetaEnv;
}

避免类型错误，提升开发体验。

⚙️ ​​三、自定义环境与构建配置​​

1. ​​扩展多环境支持​​

  • ​​添加测试环境​​：创建 .env.test，配置测试专用变量。

  • ​​自定义模式启动​​：

    // package.json
"scripts": {
  "dev:test": "vite --mode test"
}

    运行 npm run dev:test 加载 .env.test 文件。

2. ​​在 vite.config.js 中使用变量​​

通过 loadEnv() 加载环境变量，用于配置代理、端口等：

import { defineConfig, loadEnv } from 'vite';

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd()); // 加载变量
  return {
    server: {
      port: Number(env.VITE_PORT) || 3000, // 读取端口配置
      proxy: {
        '/api': {
          target: env.VITE_API_BASE_URL, // 动态代理目标
          changeOrigin: true,
        }
      }
    }
  };
});

⚠️ ​​四、安全与最佳实践​​

  1. ​​避免提交敏感信息​​

    • 将 .env* 添加到 .gitignore 中。

    • 敏感数据（如数据库密码）通过服务端环境变量传递，而非前端。

  2. ​​环境变量管理建议​​

    ​​场景​​

    ​​推荐做法​​

    通用配置

    写在 .env 中（如应用名称）

    环境差异配置

    分文件存储（如 .env.development）

    本地覆盖配置

    使用 .env.local（被 Git 忽略）

    自定义模式

    搭配 --mode 参数使用

  3. ​​构建优化​​

    • 生产环境启用压缩：配置 VITE_DROP_CONSOLE=true 移除 console.log。

    • 使用 VITE_BUILD_COMPRESS 开启 Gzip/Brotli 压缩。

💡 ​​五、完整配置示例​​

# .env（通用）
VITE_APP_NAME = MyApp
VITE_PORT = 3000

# .env.development（开发环境）
VITE_API_BASE_URL = http://localhost:3000
VITE_DEBUG = true

# .env.production（生产环境）
VITE_API_BASE_URL = https://api.myapp.com
VITE_DEBUG = false

代码中通过 import.meta.env.VITE_APP_NAME 统一访问。

💎 ​​总结​​

  • ​​核心规则​​：使用 VITE_ 前缀、分环境文件存储、通过 import.meta.env 访问。

  • ​​进阶用法​​：自定义模式、vite.config.js 动态加载、TypeScript 类型支持。

  • ​​安全第一​​：隔离敏感数据，利用 .gitignore 保护配置。

官方文档参考：Vite Environment Variables
配置问题排查：检查变量前缀、文件位置（根目录）、模式匹配是否正确。

vue TypeScript 常见...
import App from ‘...