vite 創(chuàng)建React中遇到的坑

最近,使用vite創(chuàng)建react項(xiàng)目,
將遇到的一些問題總結(jié)了一下,分享給大家
問題1:vite中運(yùn)行無法使用外部ip訪問解決方法:
方法一:????運(yùn)行npx vite --host 0.0.0.0????npm run dev --host
方法二:
在vite.config.js中增加配置server:
問題2:不會(huì)對(duì) js 做 jsx 的語法轉(zhuǎn)換
報(bào)錯(cuò):[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
解決方案:只需要在提示錯(cuò)誤的文件中引入React即可
代碼如下:
??
?? ? ?import React,{ useState } from 'react'
問題4:使用@loadable/component動(dòng)態(tài)路由的實(shí)現(xiàn)方法
Vite 支持使用特殊的?import.meta.glob?函數(shù)從文件系統(tǒng)導(dǎo)入多個(gè)模塊
代碼:
modules 打印效果如下:modules為一個(gè)對(duì)象,對(duì)應(yīng)鍵名為路徑名,對(duì)應(yīng)值為一個(gè)函數(shù)返回import導(dǎo)入的組件

茍有恒 , 何必三更眠五更起
關(guān)注我,一起學(xué)習(xí)吧