自定义静态路由不起作用 [英] Custom static route not working

查看:130
本文介绍了自定义静态路由不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

您好我正在努力建立我的项目。
My Current项目结构

Hi I am trying to establish my project in react. My Current project structure is

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

我使用节点js作为服务器
我希望我的静态文件在 localhost:port // w /
和api上调用调用 localhost:port // api /

I am using node js as server I want my static files to called on localhost:port//w/ and api call on localhost:port//api/

我试过操作 server.js ,路线,项目结构和 webpack.config 但无法取得成功。

I have tried manipulating server.js, routes, project structure and webpack.config but could not get success.

server.js

server.js

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

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

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

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

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

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

webpack.config

webpack.config

const path = require('path');

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

我的路线

const AppRouter = (props) => {
    return (
        <BrowserRouter>
            <div>
                <Switch>
                    <Route path="/" component={Dashboard} />
                    <Route path="/w/resume-builder" component={ResumeBuilder} />
                </Switch>
            </div>
        </BrowserRouter>
    )
}

任何人都可以建议我应该做什么或者我缺少什么?

Can anyone suggest what should I do or What I am missing in it?

推荐答案

你必须做一些重组

-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
    }
}

您可以保持路线相同。

这篇关于自定义静态路由不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆