且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

自定义静态路由不起作用

更新时间:2022-12-10 13:44:56

你必须做一些重组

-public
--dist
---bundle.js
--index.html
-server
--server.js
-src
--app.js
-webpack.config.js
-package.json
-.babelrc

Server.js

Server.js

const express = require('express');
const path = require('path');

const app = express();
const port = 3000;
const publicPath = path.join(__dirname, '../public');

app.use(express.static(publicPath));

//keep all api before fallback
app.get('/api/test', (req, res) => {
    res.send("Hello");
});

app.get('/w/*', (req, res) => {
    console.log('Calling..');
    res.sendFile(path.join(publicPath, 'index.html'));
});

app.listen(port, () => {
    console.log(`Server is up on ${port}`);
});

webpack.config.js

webpack.config.js

const path = require('path');

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

您可以保持路线相同。