Vite⚡ - Vue 无捆绑器开发设置

显然，Evan You（Vue.js 的创建者）有一天晚上不想睡觉，于是创建了Vite。

Vite 允许您使用单文件组件开发 Vue 应用程序，无需任何打包步骤。浏览器会像原生 ES 模块导入一样请求导入。开发服务器会拦截.vue文件请求并即时编译。而且速度非常快。

请注意，Vite 仍处于实验阶段⚠️ 我不知道 Vite 的未来会怎样，也不知道这篇文章的有效期有多长。但可以把它当作未来的零食和乐趣。

让我们尝试一下

创建以下文件

Comp.vue

<template>
  <button @click="count++">⚡ {{ count }}</button> 
</template>

<script>
export default {
  data: () => ({ count: 0 })
}
</script>

<style scoped>
button{
  font-size: 2rem;
}
</style>

索引.html

<div id="app"></div>
<script type="module">
  import { createApp } from 'vue'
  import Comp from './Comp.vue'

  createApp(Comp).mount('#app')
</script>

然后运行：

npx vite

转到http://localhost:3000，编辑.vue文件以查看热重载的更改。

生产捆绑包

现在让我们构建可投入生产的应用程序。

创建package.json

{
  "scripts": {
    "build": "vite build"
  }
}

跑步

npm i -D vite
npm run build

检查 dist 文件夹中的代码。

我偶然发现的问题。

• 错误：找不到模块“tslib”
  • 使固定：npm i -D tslib
• 错误：ENOENT：没有这样的文件或目录
  • 修复：手动创建一个空的 dist 文件夹

思考

它上手非常容易，开发过程也非常快，因为我可以即时看到我的修改。这就像一个即时编译的设置。所以这看起来非常有前景，也许不久之后，这将成为我们开发所有 Vue 项目的方式。

Evan You，继续施展你的魔法吧🧙

有趣的事实：法语中 vue = view，法语中 vite = fast。

补充：Vite 目前似乎已经结束，Vue 3 发布后可能会被继续支持。但如果你想立即试用 Vue 3 Beta 版，这是最简单的方法。

修改2：我说这是根据尤雨溪的一条推文得出的结论。看了代码库的提交记录，我猜它还在开发中😃。