Vite的安装和使用

初始化项目

可以采用之前介绍的 npm 工具来安装 Vite，在安装的同时可以直接进行项目的初始化操作，使用下面的命令：

npm init vite@latest
bash

注意，安装 Vite 需要 Node.js 版本在 12.0.0 以上。

输入项目名称，如图 9-4 所示。

image 2024 02 23 21 47 57 844
Figure 1. 图9-4　输入项目名称

Vite 支持很多预设的模板，这里主要选择前端项目框架，选择 vue 即可，如图 9-5 所示。

image 2024 02 23 21 48 37 266
Figure 2. 图9-5　选择项目前端框架

注意，Vite 会选择 Vue 3 来创建 Vue 项目，注意创建完项目后，需要到根目录执行 npm install 来安装相应模块，生成的目录结构如图9-6所示。

image 2024 02 23 21 50 12 674
Figure 3. 图9-6　Vite 初始化目录结构

和 Vue Cli 相比，这个目录结构更加简单一些，不包括 Vue Router 和 Vuex 等相关内容，这些需要自己手动安装和添加，毕竟 Vite 主要提供大局观的开发构建功能，不能只限制在 Vue 中，当然本章只会关注 Vite 创建 Vue 项目的相关内容。

启动项目

打开项目中的 package.json 文件，找到其中的 scripts，可以看到 3 个命令：dev、build 和 lint，如下所示：

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
}
json

分别使用 npm run 来运行这 3 个命令，它们的作用如下：

  • npm run dev：启动开发服务器。

  • npm run build：为生产环境构建产物。

  • npm run serve：本地预览生产构建产物。

一般情况下，在项目开发阶段，执行 npm run dev 会自动开启本地服务，在浏览器中访问 http://localhost:3000/index.html 即可。

注意，index.html 在项目最外层，而不是在 public 文件夹内。这是有意而为之的：在开发期间，Vite 本身可以看作一个服务器，而 index.html 是该 Vite 项目的入口文件。Vite 将 index.html 视为源码和模块图的一部分。Vite 解析 index.html 中的 <script type="module" src="…​"> ，这个标签指向用户的 JavaScript 源码。甚至内联引入 JavaScript 的 <script type="module"> 和引用 CSS 的 <link href> 也能利用 Vite 特有的功能被解析。

npm run build 将会执行生产打包功能，会在当前目录生成 dist 目录，并将资源压缩替换成符合生成环境要求的源码文件。

npm run serve 产生的结果和 npm run build 类似，只是并不会生成 dist 目录，即下面的文件，而是提供一个本地服务，可以用来直接访问生产模式下的各个源码文件和环境，相当于对生产环境进行预先测试的环境。

热更新

热更新(Hot Module Replacement, HMR)是 Vite 提供的最有用的功能之一，它允许在运行时更新各种模块，而无须进行完全刷新，并且 Vite 热更新基于原生 ES 6 Modules，速度更快，这也是 Vite 区别于其他构建工具的优势。

注意，不需要手动设置热更新，当创建应用程序时，Vite 已经默认开启，如果需要关闭，则可以修改 vite.config.js 文件，代码如下：

export default defineConfig({
    server:{
        hmr:false
    }
})
javascript