vite 创建React中遇到的坑

最近，使用vite创建react项目，

将遇到的一些问题总结了一下，分享给大家

问题1：vite中运行无法使用外部ip访问解决方法：

方法一：    运行npx vite --host 0.0.0.0    npm run dev --host

方法二：
在vite.config.js中增加配置server：

问题2：不会对 js 做 jsx 的语法转换

报错：[plugin:vite:import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.

解决方案：

1. 安装 @babel/plugin-transform-react-jsx 的插件
npm i @babel/plugin-transform-react-jsx



2. 再配置 vite.config.js文件

问题3：Uncaught ReferenceError: React is not defined

解决方案：只需要在提示错误的文件中引入React即可

代码如下：
  
      import React,{ useState } from 'react'




问题4：使用@loadable/component动态路由的实现方法

Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块

代码：

modules 打印效果如下：modules为一个对象，对应键名为路径名，对应值为一个函数返回import导入的组件

苟有恒 , 何必三更眠五更起

关注我，一起学习吧