sg-cloud/vite.config.js

import { fileURLToPath, URL } from 'node:url';
import { createHash } from 'node:crypto';
import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx'; // vite支持jsx写法
import eslintPlugin from 'vite-plugin-eslint'; // vite编译时动态显示eslint校验问题
import { createHtmlPlugin } from 'vite-plugin-html'; // vite编译html

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
    // 获取APP开头的 环境变量
    const { APP_TITLE, APP_ICON_URL } = loadEnv(mode, process.cwd(), 'APP');

    return {
        plugins: [
            vue(),
            vueJsx(),
            eslintPlugin({
                include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue'],
            }),
            createHtmlPlugin({
                inject: {
                    data: {
                        // 将环境变量 APP_TITLE 赋值给 title 方便 html页面使用 title 获取系统标题
                        title: APP_TITLE,
                        iconUrl: APP_ICON_URL,
                    },
                },
            }),
        ],

        resolve: {
            alias: {
                '@': fileURLToPath(new URL('./src', import.meta.url)),
            },
        },

        css: {
            modules: {
                generateScopedName: (name, filename, css) => {
                    const [, onlyFileName] = /\/(\w+)\.vue/g.exec(filename);
                    const cssHash = createHash('sha256').update(css);
                    const hex = cssHash.digest('hex');
                    const hash5 = `${hex}`.substring(0, 5);
                    return `${onlyFileName}_${name}_${hash5}`;
                },
            },
        },

        envPrefix: ['APP_', 'VITE_'],

        // css: {
        //     preprocessorOptions: {
        //         less: {
        //             javascriptEnabled: true,
        //             // 自动导入 less声明的全局变量
        //             additionalData: `@import "${fileURLToPath(new URL('./src/styles/variables.less', import.meta.url))}";`,
        //         },
        //     },
        // },

        // esbuild: { loader: { '.js': '.jsx' } },

        server: {
            // host: true, // 监听所有地址
            proxy: {
                // 使用 proxy 实例
                // '/api': {
                //     // target: 'http://192.168.10.79:9999',
                //     // target: 'http://192.168.10.111:9900',
                //     // target: 'http://192.168.10.32:8102',
                //     // target: 'http://192.168.10.32:9999',
                //     changeOrigin: true,
                //     rewrite: (path) => path.replace(/^\/api/, ''),
                // },
                // 案例
                // // 字符串简写写法：http://localhost:5173/foo -> http://localhost:4567/foo
                // '/foo': 'http://localhost:4567',
                // // 带选项写法：http://localhost:5173/api/bar -> http://jsonplaceholder.typicode.com/bar
                // '/api': {
                //     target: 'http://jsonplaceholder.typicode.com',
                //     changeOrigin: true,
                //     rewrite: (path) => path.replace(/^\/api/, ''),
                // },
                // // 正则表达式写法：http://localhost:5173/fallback/ -> http://jsonplaceholder.typicode.com/
                // '^/fallback/.*': {
                //     target: 'http://jsonplaceholder.typicode.com',
                //     changeOrigin: true,
                //     rewrite: (path) => path.replace(/^\/fallback/, ''),
                // },
                // // 使用 proxy 实例
                // '/api': {
                //     target: 'http://jsonplaceholder.typicode.com',
                //     changeOrigin: true,
                //     configure: (proxy, options) => {
                //         // proxy 是 'http-proxy' 的实例
                //     }
                // },
                // // 代理 websockets 或 socket.io 写法：ws://localhost:5173/socket.io -> ws://localhost:5174/socket.io
                // '/socket.io': {
                //     target: 'ws://localhost:5174',
                //     ws: true,
                // },
            },
        },
    };
});