在Github页面上使用Parcel Build部署Reaction应用程序 [英] Deploying React app with Parcel build on Github Pages
本文介绍了在Github页面上使用Parcel Build部署Reaction应用程序的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试在Github页面上部署带有Parcel的Reaction应用。
我已经部署了它,但该应用程序实际上并没有在屏幕上呈现。我不知道我做错了什么。
Package.json
{
"name": "pet-adoption-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"homepage": "https://github.com/junaidshaikh-js/pet-adoption-app",
"scripts": {
"format": "prettier --write "src/**/*.{js,jsx}"",
"lint": "eslint "src/**/*.{js,jsx}" --quiet",
"dev": "parcel src/index.html --public-url /pet-adoption-app/",
"predeploy": "npm build",
"deploy": "gh-pages -d dist"
},
"repository": {
"type": "git",
"url": "git+https://github.com/junaidshaikh-js/pet-adoption-app.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/junaidshaikh-js/pet-adoption-app/issues"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.13.4",
"@babel/plugin-proposal-class-properties": "^7.13.0",
"@babel/plugin-transform-runtime": "^7.16.4",
"@babel/preset-env": "^7.13.5",
"@babel/preset-react": "^7.12.13",
"eslint": "^8.3.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"gh-pages": "^3.2.3",
"parcel": "^1.12.3",
"prettier": "^2.4.1"
},
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0"
}
}
这是实时部署的链接:https://junaidshaikh-js.github.io/pet-adoption-app/
这是Github回购:https://github.com/junaidshaikh-js/pet-adoption-app
推荐答案
经过几个小时的研究,我发现当您使用react-router-dom
v4
并部署到子域(例如您的//pet-adoption-appk
)时,您必须在basename
上提供basename
属性和子域值。在您的情况下,您必须像这样传递<BrowserRouter basename="/pet-adoption-app">
这篇关于在Github页面上使用Parcel Build部署Reaction应用程序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文