开发环境下如何让Vite以HTTP文件形式注入CSS而非内联样式

Vite默认在开发环境中将CSS以内联样式的形式注入页面：

<style type="text/style"> //css code.. </style>

若要改为以HTTP文件形式注入（生成<link>标签引入独立CSS文件），只需修改Vite配置文件即可实现：

1. 打开项目根目录下的vite.config.js（或vite.config.ts）
2. 在配置中添加css选项，开启codeSplit，可选开启devSourcemap提升调试体验：

import { defineConfig } from 'vite'

export default defineConfig({
  css: {
    // 开启CSS代码分割，开发环境生成独立CSS文件
    codeSplit: true,
    // 可选：开启CSS Sourcemap，便于在开发者工具中定位源码位置
    devSourcemap: true
  }
})

配置完成后重启Vite开发服务，页面就会通过如下形式引入CSS文件：

<link rel="stylesheet" href="chunk-23dwdw.css">

这样就能在Chrome开发者工具的「Sources」面板中直接找到对应的CSS文件，解决内联代码难以调试的问题。

内容的提问来源于stack exchange，提问作者David