vite 配置 typescript 环境

要在 Vite 项目中配置 TypeScript 环境，你需要遵循几个步骤来确保 TypeScript 被正确设置并可以与 Vite 一起工作。以下是一个基本的指南：

初始化项目

如果你还没有初始化项目，可以使用 npm 或 yarn 初始化一个新的项目：

bash 复制代码

npm init -y
# 或者
yarn init -y

安装必要的依赖

你需要安装 Vite、TypeScript 以及 Vite 的 TypeScript 插件：

bash 复制代码

npm install vite typescript @vitejs/plugin-vue-jsx --save-dev
# 或者
yarn add vite typescript @vitejs/plugin-vue-jsx -D

注意：如果你正在开发一个 Vue 3 项目，并且想使用 Vue 的 JSX 支持，你可能需要安装 @vitejs/plugin-vue-jsx。否则，你可能不需要这个插件。

配置 Vite

在项目的根目录下创建一个名为 vite.config.js 或 vite.config.ts 的文件（取决于你是否想使用 TypeScript 来编写配置文件）。在这个文件中，你需要配置 Vite 以使用 TypeScript。但是，对于基本的 TypeScript 支持，你可能不需要添加任何特定的插件或配置，因为 Vite 默认就支持 TypeScript。

然而，如果你想添加一些特定的配置，例如为 TypeScript 设置别名或路径解析，你可以这样做：

javascript 复制代码

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      // 设置 TypeScript 的别名
      '@/': '/src/'
    }
  }
})

配置 TypeScript

在项目的根目录下创建一个名为 tsconfig.json 的文件，并添加以下基本配置：

json 复制代码

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "vite/client"
      // 其他你需要的类型定义
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

这个配置告诉 TypeScript 如何编译你的代码，包括目标 ES 版本、模块系统、严格模式选项等。它还告诉 TypeScript 在哪里查找类型定义和源文件。

编写 TypeScript 代码

现在，你可以在你的项目中编写 TypeScript 代码了。确保你的文件扩展名是 .ts 或 .tsx（对于包含 JSX 的文件）。

运行和构建你的项目

使用 Vite 的命令来运行和构建你的项目：

bash 复制代码

# 运行开发服务器
npm run dev
# 或者
yarn dev

# 构建生产版本
npm run build
# 或者
yarn build

确保你的 package.json 文件中的 scripts 部分包含了这些命令的正确配置。