vue3+ts+vite+ElementPlus+Pinia项目搭建，首次进入加载慢页面白屏，按需引入ElementPlus和语言设置，打包文件过大优化

使用Vite创建 Vue3+ts项目模板，Element-Plus UI插件，json-server模拟数据，包含用户登录，路由权限，Echarts视图化，数据增删改查等基本功能实现。项目链接 Vue3-Vite-TS-ElementPlus 可供参考。

1. 刷新页面加载慢解决：安装预构建插件，vite-plugin-optimize-persist 和 vite-plugin-package-config；（在火狐浏览器好像比谷歌浏览器快几倍）
2. 刷新页面挂载前空白时段可以在index.html添加动画进行处理；刷新页面白屏可以在APP.vue添加加载动画；
3. 按需引入ElementPlus：安装unplugin-auto-import 和 unplugin-vue-components，同时在vite.config.ts配置 AutoImport和Components（参考vite.config.ts）；
4. ElementPlus设置为中文：在main.ts中import locale from “element-plus/lib/locale/lang/zh-cn”，并app.use(ElementPlus, {locale})；
5. 打包文件过大，在vite.config.ts中配置build参数 rollupOptions；

tips：使用ts中当不确定参数类型时可以用typeof打印看下；使用对象或数组 key/value 时，比如attr[key]有ts警告时，可以使用attr[key as keyof typeof attr]。

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(),
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    }),
  ],
  base: "./", // build/index.html 资源路径
  resolve: {
    // extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'], // 默认，可根据需要配置
    alias: {
      "@": path.resolve(__dirname,"src") // 配置 @ 默认指向 src 路径
    }
  },
  // 打包配置
  build: {
    assetsDir: "assets",
    sourcemap: false,
    // 配置打包文件路径和命名
    rollupOptions: {
      output: {
        // 超大静态资源拆分
        manualChunks(id){
          // console.log(id,'id')
          if(id.includes('node_modules')){
            return id.toString().split('node_modules/')[1].split('/')[0].toString()
          }
        },
        chunkFileNames: 'assets/js/[name]-[hash].js',
        entryFileNames: 'assets/js/[name]-[hash].js',
        // assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
      }
    },
    
    // 清除console和debugger
    minify: 'terser', // 使用terserOptions需要配置
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    },
  }
})

package.json 文件部分配置

{
  "version": "1.0.1",
  "license": "ISC",
  "private": true,
  "scripts": {
    "dev": "vite", // 启动
    "build": "vite build", // 默认生成的 vue-tsc --noEmit && vite build 打包会用vue-tsc校验导致node_modules文件报错
    "serve": "vite preview",
    "mock": "json-server --watch --port 3100 db.json" // 模拟服务器启动
  },
 ...
}

安装element-plus引入方法，在main.ts文件配置

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css' // 这个路径跟官网给的不一样，根据实际安装路径填写
import locale from "element-plus/lib/locale/lang/zh-cn" // 设置组件默认为中文

const app = createApp(App)
app.use(ElementPlus, {locale})
app.use(router)
app.mount('#app')