环境变量必须以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-envnpm 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 提供的类型定义，旨在帮助开发者在项目中更好地使用环境变量和模块功能。
具体情况:
- 自动生成：当你创建 Vite 项目时，Vite 会自动生成相关的类型定义文件，以便 TypeScript 能够正确识别 import.meta 对象的属性。
- 类型安全：这些接口提供了类型安全的方式来访问环境变量和其他模块元数据，减少了运行时错误的可能性。
- 更新：如果你更改了 Vite 配置中的环境变量，重新启动开发服务器后，这些类型定义会自动更新，以反映最新的配置。
接口详解:
1.ImportMetaEnv:
- 描述了环境变量的类型。它可以包含任意数量的键值对，但至少有以下几个属性：
- SSR: 布尔值，指示是否启用服务端渲染。
- PROD: 布尔值，指示是否在生产模式。
- DEV: 布尔值，指示是否在开发模式。
- MODE: 当前运行模式（如 development 或 production）。
- BASE_URL: 应用的基础 URL。
2.ImportMeta:
- 描述了模块的元数据，包括：
- glob: 动态导入多个模块的函数。
- env: 当前环境变量的信息，类型为 ImportMetaEnv。
- hot: 可选属性，用于热模块替换（HMR）。
- url: 当前模块的完整路径。
模版:
interface ImportMetaEnv {
[key: string]: any
BASE_URL: string
MODE: string
DEV: boolean
PROD: boolean
SSR: 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 URL
const 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 和环境变量文件来确认和修改环境配置。
