create-react-app脚手架使用记录

  1. Failed to register a ServiceWorker: The URL protocol of the current origin ('null') is not supported

使用create-react-app脚手架,npm run build生成的文件并不能直接在本地访问

You shouldn't try to "open" index.html, you need to serve it.
When you build, you get instructions in the terminal telling you how to do it. Have you tried following them?

作者给出的答案是要仔细看打包成功后的控制台提示信息,编译成功后会显示这条信息 The build folder is ready to be deployed. You may serve it with a static server: serve -s build,我们需要全局安装serve,npm i -g serve,然后在项目的文件夹下 serve -s build即可开启一个服务,能够直接访问编译好的项目

  1. 使用webpack-dev-server服务代理跨域

脚手架已经默认安装了插件
我们在package.json中设置中设置代理的域名即可

"proxy": {
  "C1/": {
    "target": "http://192.168.4.31:8081/",
    "changeOrigin": true
  }
}
  1. 热替换
  2. 配置引入路径 使其简化

当项目嵌套过深时,引入某个模块时都需要很多 '../../../' 诸如此类的引入路径,在webpack中可以配置引入路径,需要同时配置 webpack.config.dev 与 webpack.config.prod两个文件

const MyResolve = dir => {
    return path.join(__dirname, '..', dir)
};
alias: {
      'react-native': 'react-native-web',
      '@': resolve('src')
}

然后可以告别import httpAxios from '../../../../request/httpAxios';,而使用import httpAxios from '@/request/httpAxios'的引入方式

  1. 关于打包后文件路径的问题

默认是在根目录下访问 可以通过在package.json文件中添加"homepage" : " . "来改变访问路径
直接更改打包后的index.html是不行的 这样会导致引入文件错误

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • This project was bootstrapped with Create React App. Belo...
    unspecx阅读 10,599评论 0 2
  • 1 Webpack 1.1 概念简介 1.1.1 WebPack是什么 1、一个打包工具 2、一个模块加载工具 3...
    Kevin_Junbaozi阅读 11,776评论 0 16
  • rljs by sennchi Timeline of History Part One The Cognitiv...
    sennchi阅读 12,169评论 0 10
  • 鵲橋仙 愛薈蘇城維景 月攀梢頭,祥雲華瀚,瓏琴妙音沁甦。金蟾玉兔銀宮薈,歡喜心升難分處。 青山雲渺,安之若素,佳期...
    弘湉阅读 1,432评论 0 0
  • 这是简小姐和王先生在一起的第五个年头,从学生时代开始的恋爱如今也要步入婚姻的殿堂,似乎这是再正常不过的事情,却...
    MissZ的书阅读 1,522评论 0 1

友情链接更多精彩内容