vite支持tsx開發

根據之前寫的文章vue3+vite+ts+eslint+prettier+stylelint+husky+lint-staged+commitlint+commitizen+cz-git里面tsconfig配置了jsx相關選項，但是想要vite能夠識別我們還需要配置一下
安裝@vitejs/plugin-vue-jsx

pnpm i -D @vitejs/plugin-vue-jsx

vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";export default defineConfig({plugins: [vue(), vueJsx()],
});

別名配置

vite.config.ts配置

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import path from "node:path";export default defineConfig({plugins: [vue(), vueJsx()],resolve: {alias: {"@": path.resolve(__dirname, "src"),"@com": path.resolve(__dirname, "src/components"),},// 導入時想要省略的擴展名列表。注意，不 建議忽略自定義導入類型的擴展名（例如：.vue），因為它會影響 IDE 和類型支持。extensions: [".ts", ".js", ".json", ".tsx"],},
});

tsconfig.app.json配置

{"extends": "./tsconfig.base.json","compilerOptions": {"composite": true,"lib": ["ES2020", "DOM", "DOM.Iterable"],// vue中tsx的配置"jsx": "preserve","jsxImportSource": "vue",// 添加對應的paths配置"paths": {"@/*": ["src/*"],"@com/*": ["src/components/*"]}},"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "types/*.d.ts"],"exclude": ["node_modules/**", "dist/**", "**/*.js", "vite.config.ts"]
}

測試一下有沒有問題

vue，element-ui等 api，組件按需導入

安裝插件

pnpm i -D unplugin-auto-import unplugin-vue-components

我們還沒有配置的時候項目的目錄如下:

然后我們配置一下vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import path from "node:path";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";export default defineConfig({plugins: [vue(),vueJsx(),// 新增AutoImport({include: [/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx/\.vue$/,/\.vue\?vue/, // .vue/\.md$/, // .md],imports: [// 插件預設好包"vue","vue-router",],}),// 新增Components({}),],resolve: {alias: {"@": path.resolve(__dirname, "src"),"@com": path.resolve(__dirname, "src/components"),},// 導入時想要省略的擴展名列表。注意，不 建議忽略自定義導入類型的擴展名（例如：.vue），因為它會影響 IDE 和類型支持。extensions: [".ts", ".js", ".json", ".tsx"],},
});

這個時候插件會自動給我們生成兩個文件一個是auto-imports.d.ts和components.d.ts

這個時候我們才配置一下vite.config.ts里面的AutoImport和Components

AutoImport({include: [/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx/\.vue$/,/\.vue\?vue/, // .vue/\.md$/, // .md],imports: [// 插件預設好包"vue","vue-router",],eslintrc: {// 為true的時候，每次啟動項目都會生成 auto-imports.d.ts 以及 .eslintrc-auto-import.json、// .eslintrc-auto-import.json這個我們需要在.eslintrc.cjs的extends里面去引入，否則會報錯enabled: true,},dts: "./auto-imports.d.ts", // 插件給自動生成的聲明文件，需要我們手動導入
}),
Components({dts: "./components.d.ts", // 插件給自動生成的聲明文件，需要我們手動導入dirs: [], // 如果我們自己的業務組件，如`src/components`下面寫的組件也想實習那自動按序導入的話，可以在這里面配置上路徑
})

這個時候發現根目錄下又多了一個文件.eslintrc-auto-import.json

所以我們也要修改一下.eslintrc.cjs

為了ts不報錯，我們也需要配置一下tsconfig.app.json

然后我們安裝element-plus

pnpm i element-plus

關于組件的按需導入官方文檔上有介紹

我們照著配置好就行
這個時候我們可以在App.vue中測試一下

保存之后，我們可以看一下components.d.ts

ElButton組件就被動態引入了

也可以在文件中使用el-input，可以觀察一下components.d.ts發現插件會自動幫我們把ElInput也給動態引入了

vite proxy代理配置

配置代理用于開發環境下解決接口跨域問題，要是后端人好給解決了跨域可以不配置
關于代理的配置可以看這篇文章vite配置之獲取.env.[mode]下的數據
這個時候vite.config.ts配置如下

unocss配置

可以看這篇文章vite配置unocss

less 全局變量配置

css: {// 預處理器配置項preprocessorOptions: {less: {charset: false,// 注意 ";" 不要漏掉additionalData: '@import "./src/style/index.less";',},},},

vite build模式下去掉文件中的console,debugger

esbuild: {drop: command === 'serve' ? [('console', 'debugger')] : [],}