Vite多环境配置与打包:

环境变量必须以VITE开头

1.VITE_BASE_API：

• 在开发环境中设置为 /dev-api，这是一个本地 mock 地址，通常用于模拟后端接口。

2.VITE_ENABLE_ERUDA：

• 设置为 "true"，表示启用调试工具，通常是为了方便开发和调试。

3.VITE_PUBLIC_PATH：

• 在开发环境中设置的打包路径为 http://192.168.10.7:8001，这可能是一个本地开发服务器的地址。

开发环境:

# baseUrl 
# /dev-api 为本地 mock 地址，不使用 mock 的话此处换为你的开发环境接口地址，例如 http://192.168.233.233
VITE_BASE_API = '/dev-api'# 开发环境启用 cdn eruda 调试工具。若不启用，将 true 修改为 false 或其他任意值即可
VITE_ENABLE_ERUDA = "true"# 线上环境平台打包路径
VITE_PUBLIC_PATH = http://192.168.10.1

---

线上生产环境:

线上生产环境的链接和打包路径通常是不同的。

• VITE_BASE_API：这是指向后端 API 的基础 URL，通常用于应用程序与后端服务器通信。在你的例子中，它指向 http://192.168.10.7:8881/，这通常是一个内部或开发环境的地址。
• VITE_PUBLIC_PATH：这是静态资源的公共路径，用于线上环境中访问静态文件。在你的例子中，它指向 http://8.154.36.180:8903，可能是一个用于托管静态资源的 CDN 或服务器。

Vite多环境配置与打包:

1. 安装依赖

npm install --save-dev cross-env

npm install --save-dev cross-env 命令用于安装 cross-env 这个工具，并将其作为开发依赖添加到你的项目中。下面是更详细的说明：

cross-env 的用途

• 跨平台环境变量设置：

cross-env 允许你在不同操作系统（如 Windows 和 Unix/Linux）上统一设置环境变量。因为在 Windows 和 Unix 系统中设置环境变量的方式不同，使用 

cross-env 可以避免这些差异。

• 常用场景：通常在 package.json 的 scripts 部分使用，用于设置环境变量后执行特定的命令。

示例:

在 package.json 中的 scripts 部分，你可能会看到类似的命令：

"scripts": {"start": "cross-env NODE_ENV=development node server.js","build": "cross-env NODE_ENV=production webpack"
}

这意味着无论在 Windows 还是 Unix 系统上，你都可以使用 npm run start 或 npm run build 来启动开发或生产环境，而不必担心操作系统的差异。

如何检查项目中是否配置了 cross-env(忽略):

1.查看 package.json：

• 打开项目根目录下的 package.json 文件，检查 devDependencies 是否包含 cross-env：

2..使用命令行：

• 运行以下命令查看所有安装的包，包括开发依赖：

npm ls --dev

• 在输出中查找 cross-env，如果找到了，说明项目已经配置了这个工具。

2. 配置环境变量

在项目根目录下创建 .env 文件，分别为不同环境创建不同的环境变量配置。例如：

• .env.development：开发环境
• .env.production：生产环境

在这些文件中，你可以设置不同的环境变量，例如 API 端点或其他服务的配置。

# .env
VITE_API_URL=https://api.example.com# .env.development
VITE_API_URL=http://localhost:3000# .env.production
VITE_API_URL=https://api.prod.example.com

3. 应用环境变量

在项目中，你可以通过 import.meta.env 访问这些环境变量。

在login登录页的时候,启动的时候可以打印到控制台查看运行的环境

// 在 Vue 组件或任何 JS 文件中console.log(import.meta.env.MODE);

这个文件是自动生成的,后面会详细解释

4. 运行和构建项目

使用不同的环境变量运行和构建项目。在命令行中，你可以通过 --mode 选项指定环境。

# 开发环境
vite --mode development# 生产环境
vite build --mode production

或者，你可以在 package.json 的脚本中定义不同的命令，以便更方便地运行和构建。

// package.json
{"scripts": {"dev": "vite --mode development","build:dev": "vite build --mode development","build:prod": "vite build --mode production"}
}

然后，你可以使用 npm 或 yarn 运行这些脚本(后续给老师,老师来对命令进行区分)：

npm run dev
npm run build:dev
npm run build:prod

在 vite.config.ts中

使用了defineConfig 函数来定义构建选项。

export default defineConfig(({ mode }) => ({build: {rollupOptions: {output: {chunkFileNames: "static/js/[name]-[hash].js",entryFileNames: "static/js/[name]-[hash].js",assetFileNames: "static/[ext]/[name]-[hash].[ext]"}}}
}));

• 默认环境：如果你没有在命令行中通过 --mode 参数显式指定模式，当你运行 vite build 时，默认情况下，Vite 将会使用 production（生产） 模式。
• 在 production 模式下，Vite 会进行优化，以确保生成的构建文件适合生产环境。

可以通过在命令行中指定 --mode 参数来切换到其他环境，例如开发环境。

---

文件名:

ImportMetaEnv 和 ImportMeta 这些接口通常是在使用 Vite 和 TypeScript 时自动生成的。它们是 Vite 提供的类型定义，旨在帮助开发者在项目中更好地使用环境变量和模块功能。

具体情况:

1. 自动生成：当你创建 Vite 项目时，Vite 会自动生成相关的类型定义文件，以便 TypeScript 能够正确识别 import.meta 对象的属性。
2. 类型安全：这些接口提供了类型安全的方式来访问环境变量和其他模块元数据，减少了运行时错误的可能性。
3. 更新：如果你更改了 Vite 配置中的环境变量，重新启动开发服务器后，这些类型定义会自动更新，以反映最新的配置。

接口详解:

1.ImportMetaEnv:

• 描述了环境变量的类型。它可以包含任意数量的键值对，但至少有以下几个属性：
  • SSR: 布尔值，指示是否启用服务端渲染。
  • PROD: 布尔值，指示是否在生产模式。
  • DEV: 布尔值，指示是否在开发模式。
  • MODE: 当前运行模式（如 development 或 production）。
  • BASE_URL: 应用的基础 URL。

2.ImportMeta:

• 描述了模块的元数据，包括：
  • glob: 动态导入多个模块的函数。
  • env: 当前环境变量的信息，类型为 ImportMetaEnv。
  • hot: 可选属性，用于热模块替换（HMR）。
  • url: 当前模块的完整路径。

模版:

interface ImportMetaEnv {[key: string]: anyBASE_URL: stringMODE: stringDEV: booleanPROD: booleanSSR: boolean
}interface ImportMeta {// 当前模块的 URL，指向模块文件的完整路径url: string;// 可选属性，用于支持热模块替换 (HMR)// 如果启用 HMR，该属性提供一个上下文对象readonly hot?: import('./hot').ViteHotContext;// 当前环境变量的信息// 包含构建时或运行时的环境配置，如 API URL、版本号等readonly env: ImportMetaEnv;// 动态导入多个模块的函数// 与 glob 模式结合使用，允许批量加载模块glob: import('./importGlob').ImportGlobFunction;
}

使用示例

在 Vite 项目中，可以直接使用这些接口来访问环境变量和模块信息。

// 假设在你的 TypeScript 文件中// 访问环境变量const apiUrl = import.meta.env.VITE_BASE_API; // 访问基础 API URLconst isDev = import.meta.env.DEV; // 判断是否在开发模式// 打印环境信息console.log(`API URL: ${apiUrl}`);console.log(`Is Development: ${isDev}`);// 使用 HMR（如果启用）if (import.meta.hot) {import.meta.hot.accept((newModule) => {// 处理热更新console.log('Module updated:', newModule);});
}// 使用动态导入const loadComponent = async () => {const module = await import.meta.glob('./components/*.vue'); // 动态加载所有 Vue 组件console.log(module);
};
loadComponent();

前面提到,默认是生产环境指的是打包的默认模式:

默认模式说明

1.开发模式：

• 当你运行 vite 命令或 npm run dev 时，Vite 默认使用开发模式。这是因为开发命令通常用于启动开发服务器，帮助开发者实时预览和调试应用。

2.生产模式：

• 当你运行 vite build 时，Vite 默认会使用生产模式来构建应用。这里的 "默认" 指的是在没有显式指定 --mode 参数的情况下，Vite 会将 NODE_ENV 设置为 production。

总结

• 开发命令（如 npm run dev）默认使用开发模式。
• 构建命令（如 vite build）默认使用生产模式。

这两者并不冲突。在开发过程中，你通常使用开发模式，而在构建生产版本时，Vite 则使用生产模式。

所运行的时候默认是开发环境

如果你的 Vite 项目默认使用开发环境，通常是因为以下几个原因：

1.未指定环境模式

• 默认情况下，当你运行 vite 或 vite build 命令时，如果没有显式指定 --mode 参数，Vite 会将 NODE_ENV 设置为 development。
• 例如，运行以下命令时：

npm run dev

这将启动开发服务器，默认使用开发模式。

package.json 脚本配置

• 在 package.json 中，可能会有类似以下的脚本：

"scripts": {"dev": "vite",  // 启动开发服务器"build": "vite build"  // 构建生产版本
}

• 运行 npm run dev 会启动开发服务器，并使用开发环境。

2.vite.config.js 配置

• 如果在 vite.config.js 中没有特别配置以指定环境，Vite 将默认为开发模式。
• 你可以查看 vite.config.js，确认是否有设置 mode 的代码。

3.环境变量文件

• Vite 支持使用环境变量文件（如 .env, .env.development, .env.production）来设置不同的环境变量。
• 如果没有 .env.production 文件，或者在构建时没有指定 --mode production，则默认使用开发环境的配置。

4.命令行参数

• 如果你希望在构建时使用生产环境，可以使用：

npm run build -- --mode production

总结

你的项目默认是开发环境，通常是因为没有显式指定其他环境模式。你可以通过查看 package.json、vite.config.js 和环境变量文件来确认和修改环境配置。