解决vite+TS中使用element-plus你可能遇到的各种问题

尽管官网element-plus.gitee.io/zh-CN/guide… 也有讲,但"每个人都有不同的境遇,我们不一样…"

按需自动导入

npm install -D unplugin-vue-components unplugin-auto-import 
1

vite.config.ts 改动如下:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}), ],
}); 
1
2
3
4
5
6
7
8

此时此刻要以结果为准,要在代码用个组件试一下,pnpm run build ,如果有700kb的包,像下面这样

请检查main.ts,是否加载了全部

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(ElementPlus).mount("#app"); 
1
2
3
4
5

因为我当时是从上到下读的官网,然后就…阿巴阿巴

ElMessageBox、ElMessage 样式失效

 ElMessageBox.prompt("Please input your e-mail", "Tip", {inputPattern:/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage: "Invalid Email",}); 
1

不要执着于this.$message的方式了,在vue原型链上挂载东西本就不好…

看到网上一些解决方法是在main.ts再引入一遍,像这样

import "element-plus/theme-chalk/el-message.css";
import "element-plus/theme-chalk/el-message-box.css"; 
1
2

其实只需要重启一遍就可以了,auto-imports.d.ts会多出如下代码

export {}
declare global {const ElMessage: typeof import('element-plus/es')['ElMessage']
} 
1
2
3

实际上这个东西在保存的时候就出现,所以只需调整一下vite.config.ts插件的顺序即可

export default defineConfig({plugins: [AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),vue(),],
}); 
1
2

组件中文化

 
1
2
3
4
5

 
1
2

解决TS报错

其实auto-imports.d.ts已经有了,原因在于tsconfig.json中有如下

"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], 
1

问题就出在"src/**/*.d.ts",没有包含auto-imports.d.ts,改成"**/*.d.ts" 就好了

github项目地址 github.com/xiaodun/sf-…