基础配置
Vite 基础配置
$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev
➜ vite-app tree
.
├── index.html
├── package.json
├── public
│ └── favicon.ico
└── src
├── App.vue
├── assets
│ └── logo.png
├── components
│ └── HelloWorld.vue
├── index.css
└── main.js
看下 index 和 main， 就是利用了浏览器自带的 import 机制：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
import { createApp } from "vue";
import App from "./App.vue";
import "./index.css";
createApp(App).mount("#app");
当浏览器识别 type=“module"引入 js 文件的时候，内部的 import 就会发起一个网络请求，尝试去获取这个文件；vite 的任务，就是用 koa 起一个 http 服务，来拦截这些请求，返回合适的结果。
CSS
其他配置
Web Assembly
Web Workers
通过在导入请求中附加?worker，可以直接导入 web worker 脚本。默认的输出是一个自定义的 worker 构造函数。
import MyWorker from "./worker?worker";
const worker = new MyWorker();
Worker 脚本也可以使用导入语句代替 importScripts()，注意在开发过程中，这依赖于浏览器的原生支持，目前只在 Chrome 浏览器中工作，但在生产版本中，它被编译掉了。默认情况下，worker 脚本将在生产构建中作为一个单独的 chunk 发出。如果您希望将 worker 内联为 base64 字符串，请添加内联查询。
import MyWorker from "./worker?worker&inline";