Vite环境变量与构建

文章目录

• • @[toc]
  • • 环境变量和模式
    • • 环境变量基础
      • 环境变量的读取
      • 环境变量的加载顺序
      • 开发与生产模式
      • 代码示例
      • 模式切换
      • 高级用法：条件编译
    • 构建生产版本
    • • 理解 Vite 构建流程
      • 配置 vite.config.js
      • 代码示例：从开发到生产
      • • 1. 开发环境
        • 2. 修改配置
        • 3. 生产构建
      • 代码优化与性能提升
      • 部署与缓存控制
    • 静态站点部署
    • • 1. 构建项目
      • 2. 配置 vite.config.js
      • 3. 部署到目标服务器
      • 4. 配置域名和 SSL
      • 5. 测试部署
      • 6. 持续集成/持续部署 (CI/CD)
      • 7. 服务端渲染 (SSR) 或静态站点生成 (SSG)

环境变量和模式

环境变量基础

Vite 支持从 .env 文件中读取环境变量，这些变量可以在代码中通过 import.meta.env 访问。Vite 默认会创建以下几种 .env 文件：

• .env: 所有环境共享的基本变量。
• .env.local: 当前环境的本地覆盖变量。
• .env.[mode]: 特定于构建模式的变量。
• .env.[mode].local: 特定于构建模式的本地覆盖变量。

环境变量的读取

• import.meta.env.MODE: {string} 应用运行的模式。
• import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由base 配置项决定。
• import.meta.env.PROD: {boolean} 应用是否运行在生产环境。
• import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)。
• import