重构vite.config.json

妮妮喔妮2025-07-29 15:20

主要是添加了一个组件的按需引入。对buid打包命令进行了优化。代理也是在这里彻底学会的。

应该有很多值得学习和改进的地方。

javascript 复制代码

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'
import path from 'path'
// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue', 'vue-router', 'pinia'],
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [
        ElementPlusResolver({
          importStyle: 'less', 
        }),
      ],
    }),
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  server: {
    host: '0.0.0.0', // 允许外部访问
    port: 8081, // 自定义端口
    open: true, // 自动打开浏览器
    // 只有是开发环境才生效
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      },
      // // 添加图片代理配置！
      // '/avatars':{
      //   target: 'http://localhost:3000',
      //   changeOrigin: true,
      // }
    },
  },
  build: {
    target: 'esnext', // 构建目标
    chunkSizeWarningLimit: 1000, // 分块大小警告限制（KB）
    rollupOptions: {
      output: {
        // 手动分割代码
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        },
      },
    }
  },
})