react项目打包遇到的坑

页面空白

解决方法：
package.json文件中加上一个属性："homepage":"./"

代码

路由不能正常跳转

原因：
出现这个问题的原因应该是history的模式没有用对了，要想解决这个问题，要把history变成hash模式

解决方法：
把引入路由那里的BrowserRouter 换成 HashRouter

BrowserRoute引入打包后路由不能跳转：

代码

HashRouter引入打包后路由可以正确跳转

代码

图片没有正确显示

图片加载不出来的问题一般都是由于路径设置不准确导致的，建议采用import xxx from “xx/xx/xx.png”或者require("xx/xx/xx.png")的方式引用

下面是几种react中插入图片以及背景图片的方式
1.img标签引入图片

直接内部引入(require方式)

<img src={require('../../images/demo01bg.jpg')} alt="标签"/>

变量方式引入（import方式）

import img from '../../images/demo01bg.jpg'' //引入图片的路径
<img src={img} />     //变量的方式引入图片，记得用{}大括号来进行引用

2.背景图片的引入

直接定义的方式
background: url('./images/02bg.jpg') 0 0 no-repeat;

代码

变量的方式引入

//  import方式引入图片文件
import mainbg from './images/02bg.jpg'

// 通过字符串拼接的方式定义一个样式对象
const imgStyle = {
  backgroundImage: 'url(' + mainbg + ')',
  backgroundSize: '100%',
  backgroundRepeat: 'no-repeat'
}
class Home extends Component {
    constructor () {
        super (props)
    }
    render() {
        // 最后直接将变量赋值给标签
        <div style="imgStyle">
            ...
        </div>
    }
}

//  require方式引入图片文件

const imgStyle = {
  background: `url(${require("Image/02bg.jpg")})`,
  backgroundSize: '100%',
  backgroundRepeat: 'no-repeat'
}

class Home extends Component {
    constructor () {
        super (props)
    }
    render() {
        // 最后直接将变量赋值给标签
        <div style="imgStyle">
            ...
        </div>
    }
}