Vite 出来已经有很长一段时间了，用过的人都对他颇为好评，之前一直怕有坑没去尝试，用法上和 Webpack 是一样的。不同的是 Vite 开发环境下使用 esbuild，他不会对整个项目打包，使得他的项目运行速度非常快，开发体验也就比 Webpack 要好。 > 兼容性注意 > > Vite 需要 [Node.js](https://nodejs.org/en/) 版本 >= 12.0.0。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。选项就是选react，react-ts npm create vite@latest my-vite-app cd my-vite-app npm install npm run dev ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fab83edfd8cc4ffb8399100e9cddc1c0~tplv-k3u1fbpfcp-watermark.image?) 很快啊，这脚手架生成的项目比cra内容少一些，`react` 版本为 18.0.0 "dependencies": { "react": "^18.0.0", "react-dom": "^18.0.0" } 设置一下 src 别名 alias 修改vite.coinfig.ts export default defineConfig({ plugins: [react()], resolve: { alias: { '@': '/src' } } }) 同时，修改tsconfig.json，让IDE可以识别这个别名，加入paths "compilerOptions": { "paths": { "@/*": [ "src/*" ] } } 注意哈，这个 react 18 有一个变化，app的挂载方式变了 main.tsx import ReactDOM from 'react-dom/client' import App from './App' import './index.css' import {BrowserRouter} from "react-router-dom" ReactDOM.createRoot(document.getElementById('root')!).render( ) 对比一下旧写法 ReactDOM.render( , document.getElementById('root')) 在 App.tsx 中引入路由，同时移除掉不需要的内容 import Home from '@/container/home/Index' import About from '@/container/about/Index' function App() { return (

} /> } />

) } 刷新一下页面，测试一下/about跳转 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8aab7bee6f2e486db2e23f021bc05c0a~tplv-k3u1fbpfcp-watermark.image?) 这样项目就完美运行了，路由也正常运行了顺便装上了心爱的 mobx，不知不觉已经发展到了 6.5.0。 npm i mobx -S 当我安装上 `mobx-react` 时候，他终于报错了。原因是该依赖暂时还没更新，react18与他所需依赖冲突了。 $ npm i mobx-react -S npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: vite-project@0.0.0 npm ERR! Found: react@18.0.0 npm ERR! node_modules/react npm ERR! mobx-react@"*" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See C:\Users\dell\AppData\Local\npm-cache\eresolve-report.txt for a full report. 但是据我了解，16 17 18基本没什么变化，暂时先强制安装吧 npm i mobx-react -S --force 接下来就创建 store 文件 src/store/home/index.ts import {action, makeAutoObservable} from "mobx" class Store { count = 0 constructor() { makeAutoObservable(this, { increase: action, }) } increase() { this.count++ } } export default Store 修改 Home.tsx，新增HomeChild组件测试子组件 import React, {Component} from 'react' import Store from "@/store/home" import HomeChild from "@/container/home/HomeChild" import {observer, Provider} from "mobx-react" interface IProps { } class Home extends Component { store = new Store() addCount = () => { this.store.increase() } render() { return (

This is Home Page.

count: {this.store.count} {/* @ts-ignore store 已通过 inject 方法注入 */}

) } } export default observer(Home) 添加 HomeChild.tsx 子组件 import React, {Component} from 'react' import Store from '@/store/home' import {inject, observer} from "mobx-react" interface IProps { store: Store; } class HomeChild extends Component { render() { return (

This is Home Child

count in Home Child: {this.props.store.count}

) } } export default inject('store')(observer(HomeChild)) 点击按钮，同时触发了页面及其子组件的更新，说明 `mobx` 和 `mobx-react` 都正常工作了。 ![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/64e5e7abe67440a58c1931dd0cd000b8~tplv-k3u1fbpfcp-watermark.image?) 至此，一个 Vite + TypeScript + React + React-Router + Mobx 的项目就基本搭好了，更具体的配置需要分别去设置。完整项目代码： [https://github.com/OlyLis1005/my-vite-app](https://github.com/OlyLis1005/my-vite-app) 附加资料： Vite: [https://vitejs.dev/](https://vitejs.dev/) React: [https://react.docschina.org/docs/getting-started.html](https://react.docschina.org/docs/getting-started.html) TypeScript：[https://www.tslang.cn/docs/handbook/basic-types.html](https://www.tslang.cn/docs/handbook/basic-types.html) React-Router: [https://reacttraining.com/react-router/](https://reacttraining.com/react-router/) Mobx: [https://mobx.js.org/README.html](https://mobx.js.org/README.html)