原因
比如，我page要引入一个页面，那么引入起来就很麻烦。
图片在src\assets\img\login\bg.jpg
组件在src\pages\login\index.tsx
引入代码如下：
import React from 'react'; import style from './style.less'; import bg from '../../assets/img/login/bg.jpg'; const Login = () => { return ( <div className={style.Login}> <img src={bg}></img> </div> ); } export default Login;
设置短链接
其实这是利用webpack的功能alias。
运行npm run eject暴漏webpack的配置文件config/webpack.config.js
全局搜索alias: { 然后添加，如下配置：
alias: { '@assets':path.join(__dirname,'..','src/assets') ... },
新办法引入图片
import bg from '@assets/img/login/bg.jpg';
或者在css中使用
background-image: url("~@assets/img/login/bg.jpg");
background-image:
url(
"~@assets/img/login/bg.jpg"
);