我正在尝试使用Express来提供两个独立的Reactjs应用程序。
App1:
*主应用程序:显示不同的数据集。根前端
*路径:“/” (localhost:5000/)
App2:
*次要应用程序:用户仪表板,特定用户数据。
*路径:“/app” (localhost:5000/app)
我遇到了类似于以下链接的问题: 1:在Express中提供具有客户端路由的多个React应用程序 但那无法解决我的问题。
配置文件:
App1 package.json
App1:
*主应用程序:显示不同的数据集。根前端
*路径:“/” (localhost:5000/)
App2:
*次要应用程序:用户仪表板,特定用户数据。
*路径:“/app” (localhost:5000/app)
我遇到了类似于以下链接的问题: 1:在Express中提供具有客户端路由的多个React应用程序 但那无法解决我的问题。
配置文件:
App1 package.json
{
"name": "app1",
"version": "0.1.0",
"private": true,
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.4",
"@fortawesome/free-solid-svg-icons": "^5.3.1",
"@fortawesome/react-fontawesome": "^0.1.3",
"axios": "^0.18.0",
"classnames": "^2.2.5",
"jwt-decode": "^2.2.0",
"moment": "^2.22.0",
"react": "^16.3.1",
"react-dom": "^16.3.1",
"react-image-gallery": "^0.8.11",
"react-moment": "^0.7.0",
"react-redux": "^5.0.7",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.4",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:5000"
}
App2的package.json:
{
"name": "app2",
"version": "2.0.9",
"private": true,
"dependencies": {
"@coreui/coreui": "^2.0.4",
"@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
"@coreui/icons": "0.3.0",
"@coreui/react": "^2.0.5",
"bootstrap": "^4.1.3",
"chart.js": "^2.7.2",
"classnames": "^2.2.6",
"core-js": "^2.5.7",
"enzyme": "^3.5.0",
"enzyme-adapter-react-16": "^1.3.1",
"flag-icon-css": "^3.0.0",
"font-awesome": "^4.7.0",
"prop-types": "^15.6.2",
"react": "^16.4.2",
"react-chartjs-2": "^2.7.2",
"react-dom": "^16.4.2",
"react-loadable": "^5.5.0",
"react-router-config": "^1.0.0-beta.4",
"react-router-dom": "^4.3.1",
"react-test-renderer": "^16.4.2",
"reactstrap": "^6.4.0",
"simple-line-icons": "^2.4.1"
},
"devDependencies": {
"babel-jest": "^23.4.2",
"node-sass-chokidar": "^1.3.0",
"npm-run-all": "^4.1.3",
"react-scripts": "^1.1.5"
},
"scripts": {
"build-css": "node-sass-chokidar --include-path ./node_modules ./src/scss -o ./src/scss",
"watch-css": "npm run build-css && node-sass-chokidar --include-path ./node_modules ./src/scss -o ./src/scss --watch --recursive",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build-js": "react-scripts build",
"build": "npm-run-all build-css build-js",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:5000",
"homepage": "http://localhost:5000/app2",
}
server.js
app.use("/app2", express.static(path.join(__dirname, "app2/build")));
app.get("app2/*", (req, res) => {
res.sendFile(path.join(__dirname + "/app2/build/index.html"));
});
app.use(express.static(path.join(__dirname, "app1/build")));
app.get("*", (req, res) => {
res.sendFile(path.join(__dirname + "/app1/build/index.html"));
});
localhost:5000
成功地呈现了app1,但如果我尝试localhost:5000/app2/
,它实际上是在app1中查找route=/app2/,因此我得到了一个空白页面。
PS:我还尝试了这个解决方案,但是仍然没有好的结果。
谢谢!