一文彻底搞懂Vite配置文件vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
    open: true
  },
  resolve: {
    alias: {
      '@': '/src'
    }
  }
})

export default defineConfig({
  base: './', // 部署应用的基础路径，默认是 '/'
  root: './', // 项目根目录，默认就是当前目录
})

server: {
  host: '0.0.0.0', // 允许局域网访问
  port: 5173,      // 默认端口
  open: true,      // 是否自动打开浏览器
  proxy: {         // 配置反向代理
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, '')
    }
  }
}

resolve: {
  alias: {
    '@': '/src',
    'components': '/src/components'
  }
}

import Header from '@/components/Header.vue'

import vue from '@vitejs/plugin-vue'
plugins: [vue()]

import react from '@vitejs/plugin-react'
plugins: [react()]

build: {
  outDir: 'dist',     // 打包目录
  sourcemap: false,   // 是否生成 source map
  minify: 'esbuild',  // 压缩方式（esbuild 或 terser）
  rollupOptions: {
    output: {
      manualChunks: {
        vue: ['vue'], // 单独打包 vue 相关依赖
      }
    }
  }
}

export default defineConfig(({ mode }) => {
  console.log('当前模式:', mode) // development / production
  return {
    base: mode === 'production' ? '/prod/' : '/'
  }
})

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig(({ mode }) => {
  return {
    base: mode === 'production' ? '/my-app/' : '/',
    plugins: [vue()],
    server: {
      host: '0.0.0.0',
      port: 3000,
      open: true,
      proxy: {
        '/api': {
          target: 'http://localhost:8080',
          changeOrigin: true,
          rewrite: path => path.replace(/^\/api/, '')
        }
      }
    },
    resolve: {
      alias: {
        '@': '/src'
      }
    },
    build: {
      outDir: 'dist',
      sourcemap: false,
      rollupOptions: {
        output: {
          manualChunks: {
            vue: ['vue']
          }
        }
      }
    }
  }
})