自定义静态路由不起作用

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

您好我正在努力建立我的项目。 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 } }

您可以保持路线相同。