当前位置： 首页 > news >正文

西亚网站建设科技,WordPress建网盘,邯郸网站设计怎么做,餐饮行业网站建设怎么提要求环境变量必须以VITE开头 1.VITE_BASE_API#xff1a; 在开发环境中设置为 /dev-api#xff0c;这是一个本地 mock 地址#xff0c;通常用于模拟后端接口。 2.VITE_ENABLE_ERUDA#xff1a; 设置为 true#xff0c;表示启用调试工具#xff0c;通常是为了…环境变量必须以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_ENVdevelopment node server.js,build: cross-env NODE_ENVproduction 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_URLhttps://api.example.com# .env.development VITE_API_URLhttp://localhost:3000# .env.production VITE_API_URLhttps://api.prod.example.com3. 应用环境变量 在项目中你可以通过 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]: 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 和环境变量文件来确认和修改环境配置。