Question

我正在使用historyApiFallback: true将所有不存在的网址重定向到索引页面。它适用于第一级路由，例如localhost：8080 / abc。但是当我尝试localhost：8080 / abc / xyz时，我在浏览器控制台中收到错误

http://localhost:8080/abc/scripts/bundle.js 404（未找到）

Webpack配置

const path = require('path');

module.exports = {
    entry:"./src/app.js",
    output:{
        path:path.join(__dirname,'public','scripts'),
        filename:'bundle.js'
    },
    module:{
        rules:[{
            test:/\.js$/,
            exclude:/node_modules/,
            loader:'babel-loader'
        }]
    },
    devServer:{
        contentBase:path.join(__dirname,'public'),
        publicPath:'/scripts/',
        historyApiFallback: true
    }
}

索引页

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div id="app">
        hello
    </div>
</body>
<script type="text/javascript" src="scripts/bundle.js"></script>
</html>

文件夹结构

-node_modules/
-public/
    -scripts/
    -index.html
-src/
    -app.js
-package.json
-webpack.config.js

我错过了什么？

Answer 1

您可以使用rewrites进一步优化行为。来自the documentation：

historyApiFallback: {
  rewrites: [
    { from: /^\/$/, to: '/views/landing.html' },
    { from: /^\/subpage/, to: '/views/subpage.html' },
    { from: /./, to: '/views/404.html' }
  ]
}

Answer 2

html中脚本标记中缺少的正斜杠导致了问题。 This帮我解决了这个问题。

webpack-dev-server historyApiFallback在多级路由的情况下不起作用

2 个答案: