使用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版本中的重定向需要这样编写: <Route path="*" element={<Navigate to="/" />} />跳转需要使用useNavigate
• 进行code split的时候只需要使用React.lazy就可以了
• 如果在vite下也想实现通过cdn引入第三方库，例如React & react-dom，类似于webpack中的external，可以使用vite-plugin-externals这个插件，根据文档简单配置，然后在index.html文件中引入就可以了。
• vite的打包工具使用的rollup，当你使用code split功能后，打包出来的文件中都是index.[hash].js这样的文件，难以进行区分，如果想对分割的代码进行自定义命名你需要配置rollup的打包配置，然后自定义打包的规则：

  // vite.config.ts
  export default definConfig({
  	.
  	.
  	.
  	build: {
  		rollupOptions: {
  	      output: {
  	        manualChunks: function (id, {getModuleInfo, getModuleIds}) {
  	          // 此处写你自己的逻辑，id值为你打包文件的绝对路径
  	          // 最终需要返回相应的字符串，可以根据id的路径进行定制，
  	          // getModuleInfo 和 getModuleIds是两个函数，可以获取当前打包文件的更多信息
  	        }
  	      }
  	    },
  	}
      .
      .
      .
  })
  

希望可以帮助到各位