vite+react17+antd4+router6体验

前言

早就听说vite很香，刚好最近有个新项目启动，这次可以体验下

技术上选择vite+react17+antd+react-router v6+Recoil

对于我来说，这些东西都是新第一次接触的~~，我以前的react项目都hook之前的版本，项目架子也是别人已经搭好的了，只是在上面迭代。所以，这次的项目让我感到很激（ya）动（li）兴（shan）奋（da）。

还好项目不急，有充足的时间给我踩坑，这里也记录一下我遇到的个别问题，大多数是因为第一次接触不熟悉导致的，记录一下免得以后再踩上

项目搭建

这一步就直接看官网吧，照这官网一步步敲下了，然后再自己安装eslint prettier等工具

不得不说，vite是真的快~~

coding

1.打包后图片不显示

图片的src是这样写的，开发时没问题，可以正常显示

<img src="../../../assets/img/logo.png"/>
复制代码

打包后图片404了，然后去放了vite文档，有这几种解决方式

1)当静态资源处理

• 在根目录新建public目录，把图片放进去
• 使用根绝对路径应用图片

<img src="/img/logo.png"/> <!-- 图片在public的img文件夹中>
复制代码

2) 将资源引入为URL

import imgUrl from '../../../assets/img/logo.png'

<img src={imgUrl} />
复制代码

3) 使用new URL

import.meta.url 是一个 ESM 的原生功能，会暴露当前模块的 URL。将它与原生的 URL 构造器 组合使用，在一个 JavaScript 模块中，通过相对路径我们就能得到一个被完整解析的静态资源 URL：

• 封装一个方法

// libs/utils.js
export function getImageUrl(name) {
  return new URL(`/src/assets/img/${name}.png`, import.meta.url).href
}
复制代码

import { getImageUrl } from '@libs/utils'

<img src={getImageUrl('logo')} />
复制代码

2. 使用history跳转，url变了，页面没更新

在axios请求响应拦截里面需要做跳转，返回403的跳转去登录页，因为是在axios里面，所以没有使用useNavigate钩子，改成了history的createBrowserHistory方法

想要的效果就是当返回403时，提示无权限然后过两秒跳转，但问题是地址栏的url变了，单页面不会跳转，还停留在原来的页面

去网上搜了一下发现好多人都遇到这种问题，解决的方式也是很多种，但是可能我用的是V6版本的路由，好多方法都不适合，最后在跳转时多加一个history.go()就解决了

history.replace('/login')
history.go()
复制代码

这个问题等以后有空了再去研究，现先这样~~

3. 使用navigate跳转无效，要在编辑器再保存一次才会跳转

这个问题其实不太想写的，因为是自己太蠢了哈哈哈 ~~~

某个页面有个跳转的功能，会根据当前状态跳转不一样的页面，大概的代码如下

const navigate = useNavigate()
if(token) {
    navigate('/index')
} else {
    navigate('/login')
}
复制代码

可是不管有没有token,页面都不会跳转，刷新一下或者在编辑器保存一次触发了热更新后就会跳转了，这个问题当时真的困扰了我好久，一开始以为是navigate有什么限制，去翻react-router v6的文档又是全英文，原谅我英语太差了。后面不知道怎么突然灵光一闪，似乎想到了啥，套了一个useEffect就可以了。。。

const navigate = useNavigate()
  useEffect(() => {
    if(token) {
		navigate('/index')
    }else {
      navigate('/')
    }
  })
复制代码

看来还是自己对hooks不太熟

总结

至此，第一个vite的项目算上完美上线了，虽然第一期基本没啥功能，就一个页面，但也算是起步了。

从开发上来说，虽然是第一次尝试vite+react17+router V6,遇到的困难不少，但通过网上不断的搜索资料，基本都能解决。其实碰上的问题远不止这三个，好多小坑没有及时记录起来后面忘记了，等之后项目迭代了再慢慢收集。

从体验上来说，vite是真的真的快，哈哈~

总之遇到问题手写还是得看文档，vite文档有中文版对于英语不好的人真是太赞了，而react-rouer v6的文档就看着很累了~~

还得继续加油~

完事~