Vue3 按需引入配置中文

element-plus按需引入

一下是element-plus按需引入的vite相关配置

import { fileURLToPath, URL } from 'node:url'

import vue from '@vitejs/plugin-vue'
import Icons from 'unplugin-icons/vite'
import vueJsx from '@vitejs/plugin-vue-jsx'
import AutoImport from 'unplugin-auto-import/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import legacy from '@vitejs/plugin-legacy'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '')
  return {
    plugins: [
      vue(), vueJsx(),
      AutoImport({
        imports: ['vue'],
        resolvers: [
          ElementPlusResolver(),
          // Auto import icon components
          // 自动导入图标组件
          IconsResolver({
            prefix: 'Icon',
          })
        ],
      }),
      Components({
        resolvers: [
          IconsResolver({
            enabledCollections: ['ep'],
          }),
          ElementPlusResolver()
        ],
      }),
      Icons({
        autoInstall: true,
      })
    ]
  }
})

方法1

// 文件 app.vue
import locale from 'element-plus/lib/locale/lang/zh-cn'

</script>

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

方法2

// 文件 main.ts
import { provideGlobalConfig } from 'element-plus'
import locale from 'element-plus/lib/locale/lang/zh-cn'

const app = createApp(App)

provideGlobalConfig({
  locale
}, app, true)

提交

暂无评论