Vue3+Webpack5下如何阻止编译器处理外部静态资源？

要让Webpack不解析绝对路径的静态资源、不复制到构建目录，只需在webpack.config.js中做两处修改：

1. 配置css-loader忽略绝对路径资源解析 #

修改css-loader的配置，添加url.filter选项，让它跳过对以/开头的绝对路径资源的解析，直接保留原URL：

{
  loader: 'css-loader',
  options: {
    url: {
      filter: (url) => {
        // 忽略服务器根目录级别的绝对路径资源
        return !url.startsWith('/');
      }
    }
  }
}

2. 添加静态资源规则，禁止输出到构建目录 #

新增一条module规则，处理图片类静态资源，设置emitFile: false避免Webpack将文件复制到构建目录：

{
  test: /\.(png|jpe?g|gif|svg)$/i,
  type: 'asset/resource',
  generator: {
    emitFile: false,
    filename: '[path][name][ext]' // 保留原路径格式
  }
}

修改后的完整webpack.config.js #

const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' )
const { VueLoaderPlugin } = require( 'vue-loader' )
const path = require( 'path' )

module.exports = {
    entry: './src/index.ts',
    mode: 'production',
    module: {
        rules: [ {
            test: /\.vue$/,
            loader: 'vue-loader'
        }, {
            test: /\.ts$/,
            loader: 'ts-loader',
            exclude: /node_modules/,
            options: {
                appendTsSuffixTo: [ /\.vue$/ ]
            }
        }, {
            test: /\.s?css$/,
            use: [
                MiniCssExtractPlugin.loader,
                {
                    loader: 'css-loader',
                    options: {
                        url: {
                            filter: (url) => {
                                // 忽略服务器根目录级别的绝对路径资源
                                return !url.startsWith('/');
                            }
                        }
                    }
                },
                {
                    loader: "sass-loader",
                    options: {
                        additionalData: '@import "@/util/sass/_index.scss";'
                    }
                }
            ]
        }, {
            test: /\.(png|jpe?g|gif|svg)$/i,
            type: 'asset/resource',
            generator: {
                emitFile: false,
                filename: '[path][name][ext]'
            }
        } ]
    },
    plugins: [
        new MiniCssExtractPlugin( {
            filename: 'style.css'
        } ),
        new VueLoaderPlugin(),
    ],
    resolve: {
        alias: {
            '@': path.resolve( __dirname, 'src' )
        },
        extensions: [ '.ts', '.scss', '.vue' ],
    },
    output: {
        filename: 'app.js',
        path: path.resolve( __dirname, 'build' ),
    },
}

原理说明 #

• css-loader的url.filter会判断每个url，当url以/开头时返回false，css-loader就不会尝试解析这个路径，直接将原URL保留在编译后的CSS中。
• 静态资源规则中的emitFile: false告诉Webpack不要将匹配到的资源文件输出到构建目录，彻底避免复制行为。

这样配置后，你的Vue应用构建时只会输出app.js和style.css，所有url('/xxx')形式的静态资源引用都会原封不动保留，服务器会直接从你配置的静态资源目录加载这些文件。

内容的提问来源于stack exchange，提问作者jla