react打包成html5,create-react-app项目打包相关问题

Q1. yarn build打包生成的文件直接点击index.html报错，打不开，导致的问题是yarn build打包生成的文件部署到服务器时只能在服务器根目录，如果在其他文件夹里面会报错

A1:

默认情况下，index.html中引入js和css的方式是，需要在本地启一个服务器才行，即在打包文件根目录下打开命令行，输入http-server，即可通过localhost:8080来访问到项目。

解决办法是：

1.将所有引入资源文件的地方路径改为./，eg:，即可通过直接点击index.html来打开项目。

2.打包前在package.json文件里添加一个配置："homepage":"."，打包之后资源文件路径前面都会加上一个点

{

"name": "test04",

"version": "0.1.0",

"private": true,

"dependencies": {

"react": "^16.0.0",

"react-dom": "^16.0.0",

"react-scripts": "1.0.17"

},

"scripts": {

"start": "react-scripts start",

"build": "react-scripts build",

"test": "react-scripts test --env=jsdom",

"eject": "react-scripts eject"

},

"homepage":"."

}

这样直接点开会有一个报错

registerServiceWorker.js:71 Error during service worker registration: DOMException: Failed to register a ServiceWorker: The URL protocol of the current origin ('null') is not supported.

原因是serviceWorker不支持