Vue 3 CLI v4 Webpack资源路径配置求助：修正资源加载路径

问题分析 #

当前配置里assetsDir: '../../vendor/test'会让Webpack计算出相对路径的资源地址（vendor/test/fonts/...），但你需要的是带根路径的绝对地址（/vendor/test/fonts/...）。结合你页面部署在/test、资源从/vendor/test加载的需求，可通过以下两种方案解决：

方案一：全局调整资源基础路径 #

直接修改publicPath和assetsDir，让所有资源（字体、JS、CSS）统一从/vendor/test加载：

const { defineConfig } = require('@vue/cli-service');
const path = require("path");

module.exports = defineConfig({
    transpileDependencies: true,
    outputDir: path.resolve(__dirname, 'vendor/test'), // 资源输出到本地vendor/test目录
    publicPath: '/vendor/test/', // 资源引用的基础绝对路径
    assetsDir: '', // 资源直接放在outputDir根目录，避免层级混乱
    filenameHashing: false,
    devServer: {
        devMiddleware: {
            writeToDisk: true
        }
    },
});

说明 #

• publicPath: '/vendor/test/'：指定所有资源的引用前缀为绝对路径，字体路径会自动解析为/vendor/test/fonts/fa-light-300.woff2
• assetsDir: ''：资源直接输出到outputDir下，不需要额外子目录，避免路径计算出错

方案二：单独修改字体资源路径（保持JS/CSS路径不变） #

如果需要页面的JS/CSS仍从/test加载，仅调整字体资源路径，可通过chainWebpack修改字体文件的loader配置：

const { defineConfig } = require('@vue/cli-service');
const path = require("path");

module.exports = defineConfig({
    transpileDependencies: true,
    outputDir: path.resolve(__dirname, 'vendor/test'), // 字体输出到本地vendor/test目录
    publicPath: '/test', // JS/CSS的引用基础路径
    assetsDir: 'fonts', // 字体在outputDir下的子目录为fonts
    filenameHashing: false,
    devServer: {
        devMiddleware: {
            writeToDisk: true
        }
    },
    chainWebpack: config => {
        // 单独给字体文件设置资源引用前缀
        config.module
            .rule('fonts')
            .use('url-loader')
            .tap(options => {
                options.publicPath = '/vendor/test/';
                return options;
            });
    }
});

说明 #

• assetsDir: 'fonts'：字体资源会被输出到vendor/test/fonts目录
• chainWebpack配置：强制字体资源使用/vendor/test/作为引用前缀，最终路径为/vendor/test/fonts/fa-light-300.woff2，而JS/CSS仍保持/test开头的路径

验证方式 #

构建项目后，查看生成的CSS文件中字体的引用路径，确认是否为目标格式即可。

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