Vue3常见问题

解决TS无法识别Vue文件问题

// shims.d.ts
declare module "*.vue" {
    import { defineComponent } from "vue";
    const Component: ReturnType<typeof defineComponent>;
    export default Component;
}

// tsconfig.app.json
{
"include": ["env.d.ts", "src/**/*", "src/**/*.vue","shims.d.ts"]
}

解决IDE的TS与vue引用报错

VSCode+Volar（并禁用Vetur）+TypeScript Vue插件（Volar）

打包优化

//vite.config.ts
import { fileURLToPath, URL } from 'node:url'
import { visualizer } from 'rollup-plugin-visualizer'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  // 配置按需打包
  plugins: [vue(), visualizer({ open: false })],
  // 资源引用配置
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  esbuild: {
    // 删除 所有的console 和 debugger
    drop: ['console', 'debugger']
  },
  // 打包切分
  build: {
    minify: 'terser', // 启用 terser 压缩
    terserOptions: {
      compress: {
        drop_console: true, // 删除所有 console
        drop_debugger: true // 删除 debugger
      }
    },
    rollupOptions: {
      output: {
        //自动分割包名输出 chunkSizeWarningLimit 配置大小
        chunkFileNames: 'js/[name]-[hash].js', //入口文件名
        entryFileNames: 'js/[name]-[hash].js', //出口文件名位置
        assetFileNames: '[ext]/[name]-[hash].[ext]', //静态文件名位置
        manualChunks(id: any) {
          if (id.includes('node_modules')) {
            return id
              .toString()
              .split('node_modules/')[1]
              .split('/')[0]
              .toString()
          }
        }
      }
    }
  }
})