无法访问从 ‘dist’ 文件夹上传的页面。

huangapple go评论54阅读模式
英文:

Can't access the pages uploaded from 'dist' folder

问题

我制作了一个React项目,使用了Babel和Webpack。在使用Babel转译了main.jsx(我的JSX文件名)之后,我使用了命令'npx webpack',得到了main.js文件以及输出文件,但是当我在GitHub上传main.js、index.html和style.css时,页面无法正常运行。
请告诉我需要执行的步骤,以及Webpack的生产模式是否可以解决这个问题?

英文:

I made a react project, using babel and webpack. After transpiling the main.jsx(my jsx file name) using Babel, i used the command 'npx webpack' i got the main.js file as well as the output but when i upload the main.js ,index.html and style.css in github the page is not working.
Please tell me the steps i need to perform and also if webpack production will fix this?

答案1

得分: 1

为了构建生产环境,您需要在项目文件夹内运行以下命令:
npm run build
这将创建一个名为“dist”的新文件夹,其中包含所有生产代码。有关此步骤的更多信息,您可以查看React文档:
https://create-react-app.dev/docs/production-build/
然后,要将其上传到GitHub,您可以按照以下步骤操作:
https://stackoverflow.com/questions/12799719/how-to-upload-a-project-to-github
请记住,您上传的文件必须与“dist”文件夹中的目录结构相同。例如:
如果目录结构如下所示:

dist/index.html
dist/assets/index.css
dist/assets/index.js

您不能将其手动上传到GitHub(如果不使用Git上传),如下所示:

index.html
index.css
index.js

您必须保持与“dist”文件夹中的目录结构相同。

英文:

to build for production you need to run this command
npm run build inside your project folder,
which will create a new folder called "dist" that will contain all your production code.
you can check the react documentation for more information about this step,
https://create-react-app.dev/docs/production-build/
then, upload it to GitHub you can follow these steps
https://stackoverflow.com/questions/12799719/how-to-upload-a-project-to-github

keep in mind that files that you upload must be in the same structure tree as in the dist folder
for example:
if it is like this:

dist/index.html
dist/assets/index.css
dist/assets/index.js

you can't upload it to GitHub (if you will upload it manually not using Git) as this:

index.html
index.css
index.js

you must keep the tree structure as in the dist folder.

huangapple
  • 本文由 发表于 2023年7月6日 18:38:16
  • 转载请务必保留本文链接:https://go.coder-hub.com/76627950.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定