基础配置

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";

最近更新于 0001-01-01