front-end/hdApp/vue.config.js

module.exports = {
    configureWebpack: {
        resolve: {
            fallback: {
                timers: require.resolve('timers-browserify'),
                // webpack 5 需要的 Node.js polyfills
                path: require.resolve('path-browserify'),
                crypto: require.resolve('crypto-browserify'),
                fs: false,
                stream: require.resolve('stream-browserify'),
                buffer: require.resolve('buffer'),
                util: require.resolve('util'),
                assert: require.resolve('assert'),
                url: require.resolve('url'),
                querystring: require.resolve('querystring-es3')
            }
        },
        plugins: [
            // 为 webpack 5 提供 Buffer polyfill
            new (require('webpack')).ProvidePlugin({
                Buffer: ['buffer', 'Buffer'],
                process: 'process/browser'
            })
        ],
        // 忽略一些不需要的模块
        ignoreWarnings: [
            {
                module: /node_modules/,
                message: /Can't resolve/
            }
        ]
    },
    chainWebpack: config => {
        // 修复可能的 url-loader 配置问题
        const staticTypes = ['images', 'media', 'fonts']
        staticTypes.forEach(staticType => {
            if (config.module.rules.has(staticType)) {
                config.module.rule(staticType).uses.clear()
                config.module
                    .rule(staticType)
                    .type('asset')
                    .set('generator', {
                        filename: `static/${staticType}/[name].[hash:8][ext]`
                    })
                    .set('parser', {
                        dataUrlCondition: {
                            maxSize: 4096
                        }
                    })
            }
        })
    }
}