Webpack（VueJS）为FIrefox和Chrome使用不同的图像路径

Question

我有基于ASP.NET MVC的VueJS OnePageApplication。通过插入的VueJS脚本将视图实现为.cshtml页面，而没有内容。 应用程序放置在localhost/ksodd上的IIS中。

IIS文件结构：

wwwroot/ksodd/
- bin
- View/
- Scripts/
-- dist/
--- images/
---- search.png
--- build.js

在webpack.config.js中，我有：

module.exports = {
  ...
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '',
  ...

  module: {
    rules: [
    ...
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: 'images/[name].[ext]',
          publicPath: './Scripts/dist'
        }
      }
    ...
    ]
  }

在Vue组件中：

<template>
...
  <img src="../assets/images/search.png">
...
</template>

当应用程序在localhost上运行时，一切正常，但是当我在IIS中以localhost/ksodd运行它时，魔术发生了：

在firefox图片src中，从站点根目录localhost/Scripts/dist/images/search.png起路径错误。返回404。

在chrome图像中，src具有正确的路径：localhost/ksodd/Scripts/dist/images/search.png。返回200。

这是什么原因，我该如何解决？ 如何制作VueJS项目，使其可以在嵌套URL中使用，如在网站的根目录中一样？