基础配置

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