vite的简单配置

自己偶尔会用一下vite，但是经常忘记配置文件怎么写，官网文档一下子也看不太懂，所以这一次就整理记录一下，方便自己下次使用⭐

1️⃣首先，使用vite构建项目的时候，是需要一个默认的index.html文件，这是vite打包的一个入口文件

2️⃣vite.config.js的基础配置是这样的：

export default {
  //...
}

3️⃣base（此处摘抄官方文档）官方文档

• 开发或生产环境服务的公共基础路径。合法的值包括以下几种：
  • 绝对 URL 路径名，例如 /foo/
  • 完整的 URL，例如 https://foo.com/
  • 空字符串或 ./（用于嵌入形式的开发）

4️⃣build

• target（此处摘抄官方文档） 官方文档
  设置最终构建的浏览器兼容目标。默认值是一个 Vite 特有的值——‘modules’，这是指 支持原生 ES 模块、原生 ESM 动态导入 和 import.meta 的浏览器。
  另一个特殊值是 “esnext” —— 即假设有原生动态导入支持，并且将会转译得尽可能小：

  如果 build.minify 选项为 ‘terser’， ‘esnext’ 将会强制降级为 ‘es2019’。
  其他情况下将完全不会执行转译。
  转换过程将会由 esbuild 执行，并且此值应该是一个合法的 esbuild 目标选项。自定义目标也可以是一个 ES 版本（例如：es2015）、一个浏览器版本（例如：chrome58）或是多个目标组成的一个数组。

• rollupOptions参考文档（英文）：自定义底层的 Rollup 打包配置。这与从 Rollup 配置文件导出的选项相同，并将与 Vite 的内部 Rollup 选项合并。

  • input：js的入口文件地址
  • output
    • format：输出模块格式
    • dir：输出目录

5️⃣静态资源目录

• publicDir,默认是“public”文件夹

完整配置

export default {
  base: "./",
  build: {
    // target: 'esnext',
    // 输出目录配置
    rollupOptions: {
      input: './main.js',  // 入口文件
      output: {
        format: 'esm',       // 输出ES模块格式
        dir: 'dist'          // 输出目录
      }
    },
    publicDir:'static'       // 默认是public,此处改为static
  }
}

PS：先写这么多，以后有变化了再修改🌳