@twotwoba/vv-cli/template-vue/vite.config.ts

Easily create Vite + React19/Vue3 web/h5/mini-program/chrome-extension projects.

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

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers' // other UI library resolvers

// use @unocss/preset-icons to replace unplugin-icons (if you need, you can install unplugin-icons)
import unocss from 'unocss/vite'

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

/** @type {import('vite').UserConfig} */
export default defineConfig(({ mode }) => {
    const isProd = mode === 'prod'
    const env = loadEnv(mode, process.cwd()) // add the third param '', expected all variables in env files

    return {
        base: env.VITE_BUILD_BASE_PATH,
        resolve: {
            // vite8新增
            tsconfigPaths: true,
            alias: {
                '@': path.resolve(__dirname, 'src')
            }
        },
        plugins: [
            vue(),
            unocss(),
            AutoImport({
                include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/],
                imports: [
                    'vue',
                    'vue-router',
                    'pinia',
                    {
                        'naive-ui': ['useDialog', 'useMessage', 'useNotification', 'useLoadingBar']
                    }
                ],
                resolvers: [],
                dts: path.join(__dirname, 'src', 'auto-imports.d.ts')
            }),
            Components({
                include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/],
                extensions: ['vue'],
                resolvers: [NaiveUiResolver()],
                dts: path.join(__dirname, 'src', 'components.d.ts')
            }),
            createSvgIconsPlugin({
                iconDirs: [path.resolve(__dirname, 'src/assets/icons')],
                symbolId: 'icon-[dir]-[name]'
            })
        ],
        css: {
            transformer: 'lightningcss',
            lightningcss: {
                cssModules: {
                    pattern: '[dir]_[name]--[hash:6]'
                }
            }
        },
        build: {
            // outDir: env.VITE_BUILD_OUT_DIR,
            // vite8 默认配置
            // cssMinify: "lightningcss",
            // minify:"oxc",
            sourcemap: !isProd,
            target: 'esnext',
            rolldownOptions: {
                output: {
                    entryFileNames: 'assets/js/[name]-[hash].js',
                    chunkFileNames: 'assets/js/[name]-[hash].js',
                    assetFileNames: 'assets/[ext]/[name]-[hash].[ext]'
                },
                minify: isProd
                    ? {
                          terserOptions: {
                              compress: {
                                  drop_console: true,
                                  drop_debugger: true
                              }
                          }
                      }
                    : false
            }
        },
        server: {
            host: '0.0.0.0',
            port: parseInt(env.VITE_PORT) || 7788,
            proxy: {
                '/api': {
                    target: env.VITE_PROXY_URL,
                    rewrite: (path: string) => path.replace(/^\/api/, ''),
                    changeOrigin: true,
                    ws: false,
                    secure: false
                }
            }
        }
    }
})