Vue.js中require引入图片绑定b-img的src出现GET请求报错 多余/words/路径如何解决

请求路径被额外拼接/words/，是构建工具（webpack/Vite）的静态资源公共路径配置异常，和你写的require相对路径逻辑无关。构建流程会在解析后的静态资源路径前自动拼接全局配置的公共前缀，误配置的/words/就会被拼入最终的GET请求地址，触发资源加载报错。

• Vue CLI（webpack构建）项目调整
  打开项目根目录vue.config.js，找到publicPath配置项，删除误填的/words/内容。常规根路径部署的项目，配置publicPath: './' 即可让静态资源路径正确解析。
• Vite构建的Vue项目调整
  打开项目根目录vite.config.js，找到base配置项，移除误加的/words/前缀，本地开发、根路径部署场景下设置base: './'，即可解决路径拼接错误。
• 绕开全局配置的替代方案
  不想调整全局构建配置的话，可以把目标图片移到项目的public静态资源目录下，引用时直接写对应路径img: '/img/quiz-background.png'。这类静态资源不会走构建工具的路径拼接逻辑，会直接从站点根目录匹配加载，不受公共路径配置影响。
• 线上部署场景排查
  如果仅线上环境出现该问题、本地开发无异常，需要检查服务器静态资源挂载规则，确认资源实际访问路径和构建时配置的公共路径完全匹配，避免错误的子路径前缀被拼接到资源请求中。

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