webpack server运行后是listing directory 不能自动刷新

img
不知道为什么就是根目录了
必须要进src目录
并且也不能刷新
webpack.config也配置了target：‘web’

webpack-dev-server 启动项目时出现 "listing directory" 的问题，并且不能自动刷新，可能有几个原因导致这种情况。下面我将提供一些常见的解决方案，希望能帮助您解决问题：

  1. 确保启动路径正确：
    确保您在命令行中执行 webpack-dev-server 命令时，所处的目录是项目的根目录，而不是 src 目录。您应该在项目的根目录下执行该命令，这样 webpack-dev-server 才能正确地运行项目并提供自动刷新功能。
  2. 配置 output.publicPath：
    在 webpack 配置中，确保您已经正确设置了 output.publicPath。它指定了从哪里提供 bundle，并且是 webpack-dev-server 正确提供自动刷新所必需的。
module.exports = {
  // ...其他配置...
  output: {
    // ...其他输出配置...
    publicPath: '/'
  },
  // ...其他配置...
};

确保将 publicPath 设置为 '/' 或者相对于服务器根目录的路径。
3. 配置 devServer.publicPath：
在 webpack 配置中，您还可以尝试配置 devServer.publicPath，这可以帮助 webpack-dev-server 提供自动刷新功能。

module.exports = {
  // ...其他配置...
  devServer: {
    publicPath: '/'
  },
  // ...其他配置...
};
  1. 配置 devServer.historyApiFallback：
    如果您正在使用 Vue Router 或类似的前端路由库，并且启用了 HTML5 history 模式，那么您需要配置 devServer.historyApiFallback 选项，以确保单页面应用的路由能够正确处理，并且能够自动刷新。
module.exports = {
  // ...其他配置...
  devServer: {
    historyApiFallback: true
  },
  // ...其他配置...
};

这将确保所有路径都被指向 index.html，并且能够处理前端路由。
5.检查浏览器是否禁用了自动刷新：
有时，浏览器可能会禁用自动刷新功能。请确保您的浏览器没有禁用自动刷新，并且已经允许 webpack-dev-server 提供的自动刷新。