vue3 集成element-plus

安装命令

pnpm i element-plus @element-plus/icons-vue

国际化打包报错

//@ts-ignore
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';

src别名配置
vite.config.ts

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve('./src'),
    },
  },
});

tsconfig.json

{
  "compilerOptions": {
   "baseUrl": "./",
    "paths": {
      "@/*": ["./src/*"]
    }
},

项目环境变量配置
项目根目录生成三个文件
.env.development

NODE_ENV = 'development'
VITE_APP_TITLE = '开发环境'
VITE_APP_BASE_API = '/api'
VITE_SERVE = 'http://sph-api.atguigu.cn'

.env.production

NODE_ENV = 'production'
VITE_APP_TITLE = '正式环境'
VITE_APP_BASE_API = 'http://sph-api.atguigu.cn'
VITE_SERVE = 'http://sph-api.atguigu.cn'

.env.test

NODE_ENV = 'test'
VITE_APP_TITLE = '测试环境'
VITE_APP_BASE_API = '/test-api'
VITE_SERVE = 'http://sph-api.atguigu.cn'

package.json配置运行脚本

  "build:test": "vue-tsc && vite build --mode test",
   "build:pro": "vue-tsc && vite build --mode production"

svg图标配置支持

pnpm install vite-plugin-svg-icons -D

vite.config.ts 中配置插件

// 引入svg
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
plugins: [
    vue(),
       createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      symbolId: 'icon-[dir]-[name]',
    }),
  ],
  resolve: {
    alias: {
      '@': path.resolve('./src'),
    },
  },
});

main.ts中导入svg插件

import 'virtual:svg-icons-register'

然后使用

    <svg style="width: 100px;height: 100px;">
      <use xlink:href="#icon-welcome" fill="red"></use>
    </svg>

注意是xlink:href 中间是冒号不是横杠！
全局注册组件

import type { App } from 'vue';
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
import SvgIcon from '@/components/SvgIcon/index.vue';
const allGlobalComponents = { SvgIcon };
export default {
  install(app: App) {
    console.log('install');

    Object.entries(allGlobalComponents).forEach(([key, value]) => {
      app.component(key, value);
    });
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
      app.component(key, component);
    }
  },
};