create-react-app: Facebook官方的命令行工具
根据官方文档介绍:
Create React App 是开始构建新的 React 单页面应用的最佳途径。 它可以帮你配置开发环境,以便你可以使用最新的 JavaScript 特性,还能提供很棒的开发体验,并为生产环境优化你的应用。
安装Create React App
npm install -g create-react-app create-react-app my-app cd my-app npm start
执行完以上命令之后,你的终端会输出如下,并自动打开浏览器 http://localhost:3000
目录结构
my-app/ README.md node_modules/ package.json publish/ favicon.ico index.html manifest.json src/ App.css App.js App.test.js index.css index.js logo.svg registerServiceWorker.js
当你准备好构建生产环境时,运行 npm run build
将会在 build 文件夹中创建一个优化好的应用。
问题来了: 通过 npm run build
打包应用过后 打开应用会发现页面报错了,如图:
打开打包过后的index.html, 如图:
所有引用资源的地址都是访问的根目录,所以导致页面访问不到
解决方案:
在package.json
中加入"homepage" : ".",
再次运行 npm run build
就打包完成了,页面可以正常访问。