vite相关配置参数 ​

import { ConfigEnv, defineConfig, UserConfig } from 'vite'

/**
 * 建议使用函数的方式导出配置项，操作更加灵活
 * 除了以下这种写法，我们还可以这样写：
 * export default defineConfig(({ command, mode }: ConfigEnv) => {
 *  ......
 * })
 */
export default ( { command, mode }: ConfigEnv ): UserConfig => {
    return {
        /**
         * 基础路径: 如果当前网址是127.0.0.1::5173/#/login,
         * 当我们期望是127.0.0.1::5173/fx/#/login,我们需要将base配置成'/fx',
         * 并且所有的请求都会自动加上'/fx'
        */
        base: '/',

        // 文件根路径(index.html 文件所在的位置), 默认为process.cwd()
        root: process.cwd(),

        // 设为false 可以避免 vite 清屏而错过在终端中打印某些关键信息
        clearScreen: true,

        resolve: {
            /**
             * 定义别名,
             * 例如将/@/指向src文件夹
             * tips: 如果使用ts, 请在tsconfig => compilerOptions => paths: {
             *      "/@/*": ["src/*"],
             * }, 否则会报语法错误
             * 后期我们会使用vite-aliases插件自动帮我们生成别名,这个会在vite插件中介绍
             */
            alias: [
                {
                    find: /^\/@\//,
                    replacement: pathResolve('src') + '/'
                },
                ...
            ]
        },

        css: {
            // 配置 css modules 的行为
            modules: {
                
            },
            // postCss 配置
            postcss: {

            },
            //指定传递给 css 预处理器的选项
            preprocessorOptions:{
                scss: {
                    additionalData:`$injectedColor:orange;`
                },
                less: {
		            modifyVars: {
						hack: `true; @import (reference) "./src/assets/style/var.less";`
					},
		            javascriptEnabled: true,
		        },
            }
        },

        json: {
            // 是否支持从 .json 文件中进行按名导入
            namedExports: true,
            // 若设置为 true 导入的json会被转为 export default JSON.parse("..") 会比转译成对象字面量性能更好
            stringify:false
        },

        // 继承自 esbuild 转换选项，最常见的用例是自定义 JSX
        esbuild: {
            jsxFactory: "h",
            jsxFragment: "Fragment",
            jsxInject:`import Vue from 'vue'`
        },

        // 前端服务器相关配置
        server: {
            // 端口被占用时，尝试下一个可用端口
            strictPort: false,
            // 是否启用https
            https: false, 
            /**
             * 是否在浏览器中打开页面
             * 如果想把谷歌作为默认的浏览器：
             * 打开谷歌浏览器 => 设置 => 找到默认浏览器(修改即可)
            */
            open: true,
            // 监听的ip地址, 默认是127.0.0.1
            host: 'localhost',
            // 是否强制依赖预构建
            force: true,

            hmr: {
                // 禁用开发服务器错误的屏蔽(如果代码错误,或者服务器错误 会有一个遮罩) 
                overlay: false
            },
            // 端口号
            port: '5173',
            // 代理
            proxy: {
                // 字符串写法
                '/foo': 'http://192.168.1.13:4567/foo',

                // 选项写法,这也是我们常用的写法
                '/api': {
                    // 将/api代理到target地址
                    target: 'http://jsonplaceholder.typicode.com',

                    // 是否启用跨域, 默认为false
                    changeOrigin: true,

                    // 重写地址,如果请求的url中后台没有'/api',则需要将url中的'/api'替换为''这个需要与后端协商
                    rewrite: (path) => path.replace(/^\/api/, ''),

                    // 是否启用安全模式, http为false,https为true
                    secure: false,
                    
                    // 是否支持websocket
                    ws: true,
                }
            }
        },

        // 强制预构建插件包
        optimizeDeps: {
            // 检测需要预构建的依赖项
            entries: [],
            // 默认情况下，不在 node_modules 中的，链接的包不会预构建
            include: ['axios'],
            // 排除在优化之外
            exclude:['your-package-name']
        },

        // 打包配置
        build: {
            /**
             * 设置为 false 可以禁用最小化混淆，或是用来指定使用哪种混淆器。默认为 Terser，
             * 虽然 Terser 相对较慢，但大多数情况下构建后的文件体积更小。ESbuild 最小化混
             * 淆更快但构建后的文件相对更大,建议使用默认的
             * */ 
            minify: boolean | 'terser' | 'esbuild',
            // 打包后输出路径
            outDir: 'dist',
            target: 'esnext',
            assetsDir: 'assets',
            // 打包前是否清空文件夹
            emptyOutDir: true,
            // css分割
            cssCodeSplit: true,
            // 是否压缩大型文件
            brotliSize: false,
            // 小于此阈值的资源的导入或引用将内联为base64编码，以避免额外的http请求
            assetsInlineLimit: 4096,
            //构建后是否生成 source map 文件
            sourcemap: false,
            terserOptions: {
                compress: {
                    // 防止Infinity被压缩为1/0, 默认是false，建议改成true
                    keep_infinity: true,
                    drop_console: true,
                    drop_debugger: true
                }
            },
            // 启用/禁用 brotli 压缩大小报告, 压缩大型输出文件可能会很慢
            brotliSize: false,
            /**
             * 在编写代码时，您可能已经添加了许多代码拆分点以按需加载内容。编译后，您可能
             * 会注意到一些块太小了-造成更大的HTTP开销。LimitChunkCountPlugin可以通过
             * 合并来对您的块进行后处理
            */
            chunkSizeWarningLimit: 500,

            // 自定义底层的 Rollup 打包配置
            rollupOptions: {
                // 自己开发lib包时，确保外部化处理那些你不想打包进库的依赖
                external: [
                    'ant-design-vue', 
                    'vue-i18n',
                ]
            },
            // @rollup/plugin-commonjs 插件的选项
            commonjsOptions: {
            
            },
        }
    }
}