【九月打卡】第15天 vite从入门到精通 3-9章

课程名称： Vite 从入门到精通，玩转新时代前端构建法则

课程章节： 3-9 Vite 配置项一览

课程讲师： Jokcy

课程内容：

常规配置项：

root

index.html所存在的位置，一般来说就是项目的位置

base

用来请求其它资源时前面的前置，默认 ./

mode

用来配置环境，在使用命令行启动项目时，可以使用 --mode [环境名] 重写环境，如：

yarn dev --mode test

define

用来做全局的替换

plugins

需要用到的插件数组

publicDir

静态资源的存放目录，默认 public

cacheDir

在开发时产生一些 缓存资源 所存放的目录，默认 “nome_modules/.vite”

resolve.alias

对文件路径，进行映射

resolve.dedupe

如果项目中安装了两份名字一样的依赖，可以去声明最终引入那个版本

resolve.conditions

根据不同的场景，配置不同引入的文件，通常用于有多中引入方式时配置不同引入的地址，如：

{
  "exports": {
    ".": {
      "import": "./index.esm.js",
      "require": "./index.cjs.js"
    }
  }
}

resolve.mainFields

指定 package.json 文件中 main 或 module 关键字去读这个文件

resolve.extensions

配置文件扩展名。

在 导入一个文件时，通常想省略文件的扩展名，这时可以通过这个自动配置。

注意：顺序越往前优先级越高，如：[’.mjs’, ‘.js’, ‘.ts’, ‘.jsx’, ‘.tsx’, ‘.json’]

它会优先找 .mjs 后缀的文件，没有再找 .js 后缀的文件，依次往下

css.modules

配置 CSS modules 的行为。选项将被传递给 postcss-modules。

css.postcss

给 postcss 配置（格式同 postcss.config.js）

css.preprocessorOptions

配置 CSS 预处理器的选项

json.namedExports

是否支持从 .json 文件中进行按名导入，如：

import { test } from "../app.json"

引入 json 的时候可以只引入 json 中某个字段。

这个配置就是可以关闭掉引入 json 中的某个字段

json.stringify

开启后，导入的 JSON 会被转换为 export default JSON.parse("...")。

用于JSON文件较大时。

使用这个后 json.namedExports 就不能用了

esbuild

传给 esbuild 的配置项，esbuild支持那些配置你都可以传

assetsInclude

如果需要有其它不同的文件类型，比如 import 一个 txt 的文件，你就可以在这个配置里面维护，

告诉 vite 我们 import 一个 txt 的文件 的时候，也是一个静态资源，后续打包会存放 assets 目录下

logLevel

需要打印日志的级别，默认 info 那么所有的日志都会打印出来

clearScreen

重新编译的时候，会把之前终端中打印的信息清除掉，不需要清除的话可以关掉

envDir

配置各种 .env文件的存放目录，默认在根目录下

开发服务器选项:

server.host

配置域名的，默认127.0.0.1.

如果希望通过 ip 访问，设置为 0.0.0.0 或者 true

server.port

配置启动的端口，默认 3000

server.strictPort

检查端口是否被占用，默认被占用端口号会自动向上+1，直到早点空的端口为止。

设置为 true 就不会默认 +1，端口被占用会报错

server.https

配置https 的启动方式，需要提供证书相关的内容

server.open

启动服务器是否要自动打开对应的页面

server.proxy

配置请求的代理

server.cors

跨域的配置

server.force

对于依赖的预构建，设置为 true 强制使依赖预构建。

server.hmr

关于 hmr 的配置

server.watch

监听文件的相关配置，使用的是 chokidar 的文件系统监听器选项

server.middlewareMode

是使用 ‘ssr’ 还是 ‘html’

'ssr' 将禁用 Vite 自身的 HTML 服务逻辑，因此你应该手动为 index.html 提供服务。

'html' 将启用 Vite 自身的 HTML 服务逻辑。默认

server.fs.strict

限制这个项目不会去读 项目更目录外的文件

server.fs.allow

文件资源的 root 设置

构建选项:

build.target

构建的目标，就是运行到浏览器兼容的目标

build.polyfillModulePreload

是否动态引入 polyfill，需要引入兼容性相关的文件，可以配置这个

build.outDir

指定输出路径（相对于 项目根目录).

build.assetsDir

静态资源所存放的路径

build.assetsInlineLimit

配置图片编译 base64 时的大小，大于以文件的形式引入，小于会直接编译成base64

build.cssCodeSplit

css 文件进行拆分。

如果禁用，整个项目中的所有 CSS 将被提取到一个 CSS 文件中。

build.sourcemap

是否使用 source map

build.rollupOptions

直接把一些 options（配置）传给 rollup

build.commonjsOptions

rollup 的 commonjs 插件的配置

build.dynamicImportVarsOptions

这个 @rollup/plugin-dynamic-import-vars 插件的配置

build.lib

导出一个库模式，而不是一个应用的模式

build.manifest

生成一个 manifest.json 的文件

build.minify

是否使用 minify

build.terserOptions

传递 terser 相关的配置

build.write

设置为 false 就不会把文件写入磁盘

build.emptyOutDir

在构建的时候是否 先把 OutDir 给清空，再把新构建的文件放进去

build.brotliSize

计算文件压缩之后大小的报告

build.chunkSizeWarningLimit

某个文件超过了 某个大小，会给一个提醒，默认 500 kbs

build.watch

是否监听文件变化

依赖优化选项:

optimizeDeps.entries

Vite 会抓取你的 index.html 来检测需要预构建的依赖项

optimizeDeps.exclude

optimizeDeps.include

optimizeDeps.keepNames

es6 的配置项，就是打包器有时需要重命名符号以避免冲突， 设置此项为 true 可以在函数和类上保留 name 属性。

就是你的函数名就不会编译了，防止命名的冲突

SSR 选项

…

课程收获：
了解 vite中的配置