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

尽管官网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-…