[英]Deploying React app with Parcel build on Github Pages
我正在尝试在 Github 页面上部署一个带有 Parcel 的 React 应用程序。
我已经部署了它,但应用程序实际上并没有在屏幕上呈现。 我不明白我做错了什么。
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
步骤1
第 2 步“主页”:“https://[USERNAME].github.io/[YOUR REPO NAME]”,
步骤 3 npm 安装 gh-pages --save-dev
步骤 4 在 package.json 文件中添加脚本
“predeploy”:“npm run build”,“deploy”:“gh-pages -d build”,
运行 npm 下面给出的命令运行 deploy
正如@tromgy 在讨论中指出的那样,问题的根源在于生成的html
页面在 url 引用各种资产之前包含/
字符。
例如,如果您在domain.com/subfolder/index.html
中有一个包含<script src="/script.js">
的 html 文件,则浏览器将在domain.com/script.js
中查找该脚本,而不是domain.com/subfolder/script.js
。
如果您改为删除/
(例如<script src="script.js">
),浏览器将查找相对于 html 文件所在位置的脚本(例如domain.com/subfolder/script.js
),即可能是你想要的。
Parcel 支持--public-url
选项来完成此操作(请参阅cli docs和target docs )。 通过传递一个.
作为参数,您可以告诉 parcel 省略 output 中的/
。 因此,您的构建脚本将类似于:
parcel build src/index.html --public-url .
(奇怪的是,在您的问题中,您显示了一个使用此选项的dev
命令,但我在示例 repo 中没有看到该代码)
另一件需要注意的是,您使用的是不受支持的 v1 版本的包裹。 我将您升级到 v2 并在此 PR中修复了上述问题。
经过数小时的研究,我发现当您使用react-router-dom
> v4
并部署到子域(例如 //pet- basename
//pet-adoption-appk
在您的情况下)时,您必须在<BrowserRouter>
带有子域值。 在您的情况下,您必须像这样传递它<BrowserRouter basename="/pet-adoption-app">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.