Vite配置文件解析

`vite.config.js`

当以命令行方式运行 vite 时，Vite 会自动解析 项目根目录 下名为 vite.config.js 的配置文件。

它是 Vite 的唯一配置文件，Node 进程在启动 dev / 执行 build 时读取，控制 "代码怎么被编译、怎么打包"。

最基础的配置文件是这样的：

javascript 复制代码

export default {
  // 配置选项
}

案例

javascript 复制代码

export default defineConfig({
  server: {
    host: true,
    port: 5173,
    proxy: {
      '/api': 'http://localhost:3000',
    },
  },
  base: '/blog/',
  plugins: [
    vue(),
    //&&表示左边为真才执行右边；左边为假直接返回 `false`
    process.env.NODE_ENV !== 'production' && vueDevTools(),
    AutoImport({ ... }),
    Components({ ... }),
    { name: 'katex-woff2-only', ... },
    blogsPlugin(),
  ],
  resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } },
  build: { rolldownOptions: { output: { manualChunks(...) {} } } },
})

defineConfig：在 TS 项目里提供类型检查和补全，其他时候没什么用

`vite.config.js`常用参数详解

`server`

server 是 Vite 的开发服务器配置 ，只管 npm run dev，对 npm run build 的生产产物没有任何影响。

proxy用于处理跨域问题。

proxy: { '/api': 'http://localhost:3000' }：凡是前端发出以 /api 开头的请求，Vite 都替它转发到 localhost:3000

host: true：开启局域网访问，这样其他设备也可以通过ip来浏览当前开发中的网站

open: true：启动时自动打开浏览器

port: 5173：指定端口；被占用时 Vite 会自动换成 5174、5175...

`base`

base 决定打包产物里资源引用的 URL 前缀

base: '/blog/' 部署在xxx.com/blog/

不配默认是 /（根路径）

只有资源请求的前缀 和文件在服务器上的实际位置对不上时才需要写 base。

打包产物被读取 = 浏览器按 index.html 里的 src（base 决定）发请求 → Nginx 拿 root 把 URL 翻译成磁盘路径 （root 决定）→ 找到文件返回。root = html/ 的意思是 "URL 的 / 对应磁盘的 html/"，所有请求都拼在它后面找文件。base 和 root 就是" 请求方写什么地址 "与" 服务器去哪找 " 这对必须对齐的搭档。

例：nginx里面 root = html/，而文件在 html/blog/。此时页面里 /assets/x.js 会去请求 html/assets/导致找不到文件。此时配 base: '/blog/'，来让页面请求正确路径。

直接把 nginx root 指向 html/blog/，base 就不需要改了

`plugins`

Vite的核心机制------ 所有 "处理文件" 的能力都来自插件

这里我们以 plugins: [ vue() ] 来讲解一下插件配置的原理

vue() 是一个工厂函数调用 ：执行后返回一个插件对象。这个对象包含 name 以及钩子函数（resolveId / load / transform 等），还可能带 api。plugins 数组里的每一项，最终都是一个对象（或 false） ------vue 只是 "能产生插件对象的函数"。

Vite 的机制非常简单粗暴：

Vite 按钩子名分组 执行：所有插件的 resolveId 先跑完，再跑所有插件的 load，最后跑所有插件的 transform（同一钩子内部按 plugins 数组的顺序）。对每个被 import 的模块，这组流程都会走一遍。

`resolve`

resolve 是 Vite 的 "模块解析总配置" ，通俗来说就是：负责把import { useUserStore } from '@/store/user'里面的@/store/user翻译成磁盘文件路径

常规用法就是alias，

javascript 复制代码

alias: {
  '@': fileURLToPath(new URL('./src', import.meta.url)),
},

表示用@指代./src

"以配置文件为基准点，算出 src 的绝对路径" ------ 不管你在哪启动项目，这个路径都稳定。

import.meta.url ------ 当前文件自己的 "地址"

new URL('./src', import.meta.url) ------ 以配置文件为原点，找 ./src

fileURLToPath(...) ------ URL 转成 Windows 路径

`build`

build 是 Vite 配置里的生产构建块 ------ 只在 npm run build 时生效，npm run dev 完全不经过它

build.rolldownOptions.output.manualChunks = 给打包器指定的 "分组名单 "：哪些第三方大库单独打包成一个文件，让它们永远命中浏览器缓存。它只在 npm run build 时起作用，是发布后加载性能的优化手段

`jsconfig.json` 文件解析

jsconfig.json 是给编辑器（VS Code）看的配置文件 ------ 它不参与打包，只管你的 "编辑器体验"：代码提示、跳转、类型检查

TS项目里面是tsconfig.json

案例

javascript 复制代码

{
  "compilerOptions": { "paths": { "@/*": ["./src/*"] } },
  "exclude": ["node_modules", "dist"]
}

"compilerOptions": { "paths": { "@/*": ["./src/*"] } }：不配置这个就不能Ctrl+点击 @ 跳转到指定文件

vite.config.js里面的才是真正决定代码能不能跑 的，jsconfig.json只是告诉编辑器@是什么路径

"exclude": ["node_modules", "dist"]：排除 node_modules 和 dist，避免语言服务卡顿和把第三方 / 构建产物也纳入检查

Vite配置文件解析

vite.config.js

案例

vite.config.js常用参数详解

server

base

plugins

resolve

build

jsconfig.json 文件解析

案例

`vite.config.js`

`vite.config.js`常用参数详解

`server`

`base`

`plugins`

`resolve`

`build`

`jsconfig.json` 文件解析