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

最新推荐文章于 2025-05-11 11:23:01 发布

蚂蚁二娘

最新推荐文章于 2025-05-11 11:23:01 发布

阅读量4.1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/web2022050901/article/details/126840744

本文介绍了在使用vite和TypeScript搭建的前端项目中，如何解决element-plus组件库可能遇到的问题，包括按需自动导入、样式失效、组件中文化和TS报错。提供了解决这些问题的具体步骤和注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

按需自动导入

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

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()],}), ],
});

此时此刻要以结果为准,要在代码用个组件试一下,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");

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

ElMessageBox、ElMessage 样式失效

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

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

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

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

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

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

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

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

组件中文化

<script setup lang="ts">

import zhCn from "element-plus/lib/locale/lang/zh-cn";

</script>

<template><el-config-provider :locale="zhCn"></el-config-provider>
</template>

解决TS报错

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

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

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

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