Vite（Vue 3 + TypeScript）配置开发、测试和生产环境

Vite 是一个现代化的构建工具，专为快速开发和即时重载而设计。它提供了开箱即用的 Vue 3 支持，并与 TypeScript 完美集成。通过 Vite，我们可以轻松配置开发、测试和生产环境，以确保在不同的环境下都能获得最佳的性能和体验。
一、安装 Vite
首先，确保您已经安装了 Node.js 和 npm。然后，通过 npm 安装 Vite：

npm install -g create-vite

这将全局安装 create-vite 脚手架工具。
二、创建新项目
使用 create-vite 创建一个新的 Vue 3 + TypeScript 项目：

create-vite my-vue-app --template vue-ts

这将创建一个名为 my-vue-app 的新项目，并使用 Vue 3 和 TypeScript 作为默认配置。
三、配置开发环境
在项目根目录下，打开 vite.config.ts 文件，并进行以下配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'/@': path.resolve(__dirname, './src') // 配置别名，方便引入本地模块
}
},
build: {
outDir: 'dist', // 输出目录为 dist 文件夹
assetsDir: 'static', // 静态资源文件夹为 static 文件夹
rollupOptions: {
input: 'src/main.ts' // 主入口文件路径为 src/main.ts
}
}
})

在上面的配置中，我们定义了别名 /@，它将指向项目的 src 文件夹，这样我们可以方便地引入本地模块。我们还指定了输出目录为 dist 和静态资源文件夹为 static。最后，我们指定了主入口文件路径为 src/main.ts。
四、配置测试环境
在项目根目录下，创建一个名为 test.config.ts 的文件，并进行以下配置：
```typescript
import { defineConfig } from ‘vite’
import vue from ‘@vitejs/plugin-vue’
import path from ‘path’
import { defineTest } from ‘vitest’ // 导入 vitest 库进行测试配置
export default defineConfig({
plugins: [vue()],
resolve: { alias: { ‘/@’: path.resolve(__dirname, ‘./src’) } }, // 配置别名，方便引入本地模块
test: { // 在这里进行测试相关配置 } }, // 在这里进行测试相关配置 } }, // 在这里进行测试相关配置 } }, // 在这里进行测试相关配置 } }, // 在这里进行测试相关配置 } }, // 在这里进行测试相关配置 } }, // 在这里进行测试相关配置 } }, // 在这里进行测试相关配置 } }, // 在这里进行测试相关配置 } }, // 在这里进行测试相关配置 } }, // 在这里进行测试相关配置 } }, // 在这里进行测试相关配置 } }, // 在这里进行测试相关配置 } }, // 在这里进行测试相关配置 } }, // 在这里进行测试相关配置 } }, // 在这里进行测试相关配置 } }, // 在这里进行测试相关配置 } }, // 在这里进行测试相关配置 } }, // 在这里进行测试相关配置 } }, // 在这里进行测试相关配置 } }, // 在这里进行测试相关配置 } }, // 在这里进行测试相关配置 } }, // 在这里进行测试相关配置 } }, // 在这里进行测试相关配置 } }, // 在这里进行测试相关配置 } }, // 在这里进行测试相关配置 } }, // 在这里进行测试相关配置 } }, // 在这里进行测试相关配置 } }, // 在这里进行测试相关配置 } }, // 在这里进行测试相关配置 } }, // 在这里进行测试相关配置 } }, // 在这里进行测试相关配置 } }, // 在这里进行测试相关配置 } }, // 在这里进行测试相关配置 } }, // 在这里进行测试相关配置 } }, // 在这里进行测试相关配置 } }, // 在这里进行测试相关配置 } },