如何在Webpack（Vue+Quasar）中加载含#符号的public资源？

1. 修改Quasar的Webpack配置 #

问题根源是#在URL里会被当成锚点，浏览器自动截断后面的内容。得让Webpack处理资源时把文件名编码，确保#被转义成%23。

打开项目根目录的quasar.config.js，找到build部分，添加Webpack扩展配置：

// quasar.config.js
module.exports = configure(function (ctx) {
  return {
    // ...保留原有其他配置
    build: {
      extendWebpack(cfg) {
        // 给音频文件单独配置处理规则，强制开启文件名编码
        cfg.module.rules.push({
          test: /\.(wav|mp3|ogg)$/, // 按需匹配你的音频格式
          type: 'asset/resource',
          generator: {
            filename: 'assets/audio/[name][ext]', // 自定义输出路径，可修改
            encodeURI: true // 核心配置：开启URI编码
          }
        });
      }
    },
    // 开发环境下的devServer也要同步配置
    devServer: {
      static: {
        directory: 'public',
        encodeNames: true // 让devServer正确编码文件名
      }
    }
  }
});

如果你的项目依赖Webpack 4（使用file-loader），就把上面的asset规则替换成以下配置：

cfg.module.rules.push({
  test: /\.(wav)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name][ext]',
        outputPath: 'audio/',
        encodeURI: true // 同样开启文件名编码
      }
    }
  ]
});

2. 组件内引用文件时手动编码 #

在Vue组件里引用音频文件时，一定要用encodeURIComponent处理文件名，确保请求的URL是转义后的正确格式：

<template>
  <audio :src="audioSrc" controls></audio>
</template>

<script setup>
const audioFileName = '078-F#.wav';
// 编码文件名后再拼接路径
const audioSrc = `/audio/${encodeURIComponent(audioFileName)}`;
</script>

3. 验证效果 #

开发环境启动项目后，打开浏览器控制台查看音频请求的URL，应该显示为/audio/078-F%23.wav这种编码后的形式，此时文件就能正常加载。生产构建完成后，去dist文件夹检查输出的文件名，确认#被保留且线上请求正常。

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