uni-app5 app打包,vue3开发vite.config.js的配置

import {
    defineConfig,
    loadEnv
} from 'vite'
import vue from '@vitejs/plugin-vue'
import {
    resolve
} from 'path'
/* 一个按需自动导入Vue/Vue Router等官方Api的插件 */
import AutoImport from 'unplugin-auto-import/vite'
/* 解决vue3下 script setup语法糖 下 ,手动设置组件name不方便的问题 */
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
/* 打包体积分析插件 */
import {
    visualizer
} from 'rollup-plugin-visualizer'
/* 打包压缩 */
import viteCompression from 'vite-plugin-compression'
import legacy from '@vitejs/plugin-legacy';
import Components from 'unplugin-vue-components/vite';
import {
    AntDesignVueResolver
} from 'unplugin-vue-components/resolvers';
export const r = (...args) => resolve(__dirname, '.', ...args)
export default defineConfig(({
    command,
    mode
}) => {
    const envConfig = loadEnv(mode, './')
    return {
        plugins: [
            vue(),
            viteCompression(),
            vueSetupExtend(),
            AutoImport({
                imports: ['vue'],
                dirs: ['./src/utils/permission'],
                dts: r('src/auto-imports.d.ts')
            }),
            /* 1.下面的注释打开，荣耀平板可以用，注释掉小米联想平板可以用 */
            legacy({
                // targets:['chrome 52', "defaults" ,"ie 11"], // 需要兼容的目标列表，可以设置多个
                // targets: ["chrome 80", "defaults", "not IE 11"],

                targets: ['defaults', "ie >= 11", 'chrome 52'], // 需要兼容的目标列表，可以设置多个
                cssTarget: ["chrome52"],
                modernPolyfills: true,
                renderLegacyChunks: true,
                additionalLegacyPolyfills: ['regenerator-runtime/runtime'], // 面向IE11时需要此插件
                polyfills: [
                    'es.symbol',
                    'es.promise',
                    'es.promise.finally',
                    'es/map',
                    'es/set',
                    'es.array.filter',
                    'es.array.for-each',
                    'es.array.flat-map',
                    'es.object.define-properties',
                    'es.object.define-property',
                    'es.object.get-own-property-descriptor',
                    'es.object.get-own-property-descriptors',
                    'es.object.keys',
                    'es.object.to-string',
                    'web.dom-collections.for-each',
                    'esnext.global-this',
                    'esnext.string.match-all'
                ]
            }),
            visualizer(),
            Components({
                resolvers: [
                    AntDesignVueResolver({
                        importStyle: false, // css in js
                    }),
                ],
            })
        ],

        define: {
            //'process.env': {}
             'process.env.NODE_ENV': JSON.stringify('production')
        },
        server: {
            host: '0.0.0.0',
            port: envConfig.VITE_PORT,
            hmr: true, //开启热更新
            proxy: {
                '/api': {
                    target: envConfig.VITE_APP_API,
                    ws: false,
                    changeOrigin: true,
                    rewrite: (path) => path.replace(/^\/api/, '')
                }
            },
        },
        productionSourceMap: false,
        /*打包的时候不输出map文件，减少大量体积*/
        build: {
            assetsPublicPath: './',
            target: ['es2015', "chrome52"],
            /* 2.下面的注释打开，荣耀平板可以用，注释掉小米联想平板可以用 */
            chunkSizeWarningLimit: 1000,
            rollupOptions: {
                output: {
                    manualChunks(id) {
                        if (id.includes('node_modules')) {
                            return id.toString().split('node_modules/')[1].split('/')[0].toString();
                        }
                    }
                }
            },
            minify:'terser'
        },
        base: './',
        // publicPath: './',/*配置打包后的资源路径*/
        resolve: {
            alias: {
                '@': `${resolve(__dirname, 'src')}`,
                '~': `${resolve(__dirname, './')}`,
            },
        },
        css: {
            // css预处理器
            preprocessorOptions: {
                less: {
                    additionalData: `@import "${resolve(__dirname, 'src/assets/style/global.less')}";`,
                    modifyVars: {
                        'primary-color': '#000000'
                    },
                }
            }
        }
    }
})