Vite项目生产环境构建完全指南

经薇皎

于 2025-05-30 09:02:39 发布

阅读量420

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00437/article/details/148323435

Vite项目生产环境构建完全指南

vite Next generation frontend tooling. It's fast! 项目地址: https://gitcode.com/gh_mirrors/vi/vite

前言

Vite作为新一代前端构建工具，其生产环境构建流程与传统工具相比有着显著差异。本文将全面解析Vite的生产构建特性，帮助开发者掌握高效的项目部署策略。

基础构建流程

执行生产构建非常简单，只需运行以下命令：

vite build

默认情况下，Vite会以项目根目录下的index.html作为入口文件，生成适合静态托管服务部署的应用程序包。

浏览器兼容性策略

默认兼容范围

Vite的默认生产构建针对现代浏览器进行了优化，支持以下最低版本：

Chrome ≥107
Edge ≥107
Firefox ≥104
Safari ≥16

这些目标基于Web平台的广泛可用特性基准线。

自定义目标配置

通过build.target配置选项，您可以指定自定义构建目标，最低可设置为es2015。但请注意，Vite对以下特性有硬性要求：

Chrome ≥64
Firefox ≥67
Safari ≥11.1
Edge ≥79

因为这些是动态导入和import.meta语法支持的最低版本。

旧版浏览器支持

对于需要支持旧版浏览器的项目，可以使用官方提供的@vitejs/plugin-legacy插件。该插件会：

自动生成传统格式的代码块
提供必要的ES特性polyfill
智能加载策略（仅在不支持原生ESM的浏览器中加载传统代码）

公共基础路径配置

当项目部署在子路径下时，配置base选项至关重要：

// vite.config.js
export default defineConfig({
  base: '/my-sub-path/'
})

或在构建时通过命令行指定：

vite build --base=/my-sub-path/

此配置会影响：

JS导入的资源URL
CSS中的url()引用
HTML文件中的资源引用

动态URL拼接应使用import.meta.env.BASE_URL全局变量。

相对基础路径

不确定基础路径时，可配置相对路径：

base: "./"  // 或 ""

注意：使用相对路径需要浏览器支持import.meta特性。

构建过程定制

Rollup选项配置

Vite底层使用Rollup进行构建，可通过build.rollupOptions深度定制：

export default defineConfig({
  build: {
    rollupOptions: {
      // Rollup配置选项
      output: {
        manualChunks: {
          // 自定义代码分割策略
        }
      }
    }
  }
})

文件监听重建

开发构建监听模式：

vite build --watch

或通过配置实现：

export default defineConfig({
  build: {
    watch: {
      // 自定义监听选项
    }
  }
})

多页面应用构建

对于多页面应用，只需在配置中指定多个HTML入口：

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        about: resolve(__dirname, 'about/index.html')
      }
    }
  }
})

库模式开发

构建可分发库时，使用build.lib配置：

export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, 'lib/main.js'),
      name: 'MyLib',
      fileName: 'my-lib'
    },
    rollupOptions: {
      external: ['vue']  // 外部化依赖
    }
  }
})

多入口库配置

export default defineConfig({
  build: {
    lib: {
      entry: {
        main: resolve(__dirname, 'lib/main.js'),
        utils: resolve(__dirname, 'lib/utils.js')
      }
    }
  }
})

配套package.json配置

{
  "name": "my-lib",
  "type": "module",
  "files": ["dist"],
  "main": "./dist/my-lib.umd.cjs",
  "module": "./dist/my-lib.js",
  "exports": {
    ".": {
      "import": "./dist/my-lib.js",
      "require": "./dist/my-lib.umd.cjs"
    }
  }
}

CSS处理注意事项

库中的CSS会被提取为单独文件，可通过build.lib.cssFileName自定义名称。

高级基础路径配置（实验性）

对于复杂部署场景，可使用实验性功能experimental.renderBuiltUrl：

export default defineConfig({
  experimental: {
    renderBuiltUrl(filename, { hostType }) {
      if (hostType === 'js') {
        return { runtime: `window.__cdnUrl(${JSON.stringify(filename)})` }
      }
      return { relative: true }
    }
  }
})

此功能允许针对不同类型资源定义不同的基础路径策略。