VITE笔记

VITE笔记

VITE介绍

Vite 是一个 Vue 框架的构建工具，它提供了一种新的开发体验，可以更快地构建应用程序。Vite 使用 Rollup 作为其构建工具， Rollup 是一个 JavaScript 模块打包器，它允许你使用 ES2020 模块语法，并且可以打包你的应用程序。 Vite 的核心特性包括：

1. 开发环境：Vite 提供了一个快速的开发环境，它允许你使用 Vue 3 的新特性，如 JSX、TSX 和 Vue 3 的 Composition API。
2. 构建：Vite 使用 Rollup 作为其构建工具， Rollup 是一个 JavaScript 模块打包器，它允许你使用 ES2020 模块语法，并且可以打包你的应用程序。
3. 热重载：Vite 支持热重载，这意味着当你在编辑代码时，Vite 会自动重新加载页面，而不需要刷新浏览器。
4. 依赖预构建：Vite 可以预构建依赖，这可以减少应用程序的启动时间。
5. 插件：Vite 支持插件，你可以使用插件来扩展它的功能。
6. 服务器：Vite 使用原生 Node.js 服务器，因此它具有更好的性能和可扩展性。
7. TypeScript：Vite 支持 TypeScript，这使你可以使用 TypeScript 的类型检查。
8. CSS：Vite 支持 CSS，你可以使用 CSS 的新特性，如变量、函数和 mixin。

VITE+VUE3

关于VITE+VUE3项目中读取环境变量的方法

VITE推荐使用import.meta.env读取环境变量 需要注意的是，在VITE中，环境变量必须以VITE_开头，否则无法读取。

在VITE+VUE3项目中，可以通过.env文件来设置环境变量，然后通过import.meta.env读取环境变量。

为了区分开发环境、测试环境和生产环境，VITE提供了三个环境变量的设置:

1. .env.development：开发环境
2. .env.test：测试环境
3. .env.production：生产环境

可以通过vite --mode 指定环境变量

当我们定义好环境变量后，我们就可以通过import.meta.env读取环境变量了。

虽然这样可以读取环境变量，但是编译器并不能识别环境变量, 我们需要通过env.d.ts文件来告诉编译器如何识别环境变量。

在env.d.ts中，我们可以定义环境变量的类型，如下：

/// <reference types="vite/client" />
interface ImportMetaEnv {
  // 声明环境变量及其类型
  readonly VITE_API_URL: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

此时，编译器就可以识别环境变量了。

解决ts模块报错问题

如果出现以下问题: TS2307: Cannot find module @/views/MealSpinner.vue or its corresponding type declarations.

可以使用以下方法解决: 在src目录下创建一个type文件夹，并在type文件夹下创建一个shims-vue.d.ts文件，内容如下:

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const component: DefineComponent<object, object, any>
  export default component
}

具体作用分析

1. 声明模块：declare module '*.vue' 告诉 TypeScript，任何以 .vue 结尾的文件都应该被视为一个模块。
2. 导入 DefineComponent 类型：import type { DefineComponent } from 'vue' 导入 Vue 提供的 DefineComponent 类型。
3. 定义组件类型：const component: DefineComponent<object, object, any> 声明了 component 变量的类型是 DefineComponent，并且使用泛型参数指定了 props、state 和 events 类型。
4. 导出组件：export default component 表示这个模块的默认导出是 component。