使用vite+react搭建项目踩坑记录

最近有段时间没有更新博客，主要的原因是因为面临换工作，而且家里事情也比较多。最近也是安定下来，希望之后可以多更新一些文章。

vite+react项目搭建

到了新的公司之后接到了一个任务，就是重构一个已经开发维护了4年的项目，所以就想到了用一些比较新颖的之前没有用到的技术。于是就想到vite。

关于vite的信息大家可以去官网进行查看，我就不赘述了。至于使用的构建模版其实也在官网可以找到链接，我这边就直接贴上吧。https://github.com/vitejs/vite/tree/main/packages/create-vite 我使用的是react+ts。

我用到的所有技术栈如下：
vite + react + ts + antd + react-reouter + mobx + eslint + husky + commitlint
就构建来说，其实就是查阅各个技术的官方文档，没什么好说的，难度也不大。如果你刚好需要用到这些模版，你可以评论下或者点个赞，我把我的模版上传到github上。

遇到的坑

• vite proxy设置记得添加changeOrigin 否则会报405的错误
• 引入antd后报错，找不到～antd/dist/antd.less
  这个是引入路径的识别问题，vite识别不了～符号代表的路径，将～替换为/，在根目录下查找就可以了。
• 提示less的配置错误，需要在vite配置文件下设置：css:{preprocessorOptions: {less: {javascriptEnabled: true}}}
• 如果设置的MODE不是production，当你想进行preview的时候会报错：jsxDEV is not a function，这个时候需要对plugin中的react()调用添加参数：jsxRuntime: “classic”。
• 如果设置全局常量的话：define对象的值不能直接写成字符串，那样的运行时会报错（除非你设置为数字），正确的办法是设置为JSON.stringify();
• react-router-dom v6版本中的重定向需要这样编写: } />跳转需要使用useNavigate

希望可以帮助到各位