从 Vue2 版本迁移 ​

准备工作 ​

首先你需要准备一份 Vue3版本 的模版源码，并确保能在本地正常启动运行。

迁移的整个过程是将 Vue2版本 的项目环境，通过拷贝文件、修改代码的方式，一步步将 Vue3版本 的项目环境快速构建起来，所以不建议使用 Vue3版本 的演示源码做为迁移目标。

细节 ​

环境配置 ​

Vue2版本 和 Vue3版本 提供了相同的环境配置文件，但仅限于文件名相同，文件内的配置参数略有变化。例如从 VUE_APP_API_ROOT 变更为 VITE_APP_API_BASEURL ，在迁移过程中，需特别注意，建议可将原有配置的变量逐一覆盖到 Vue3版本 的环境配置文件中。

如果在 Vue2版本 中自定义了一些环境变量，注意在迁移的时候，需要将 VUE_APP_ 开通的变量替换为 VITE_ 开头，并在项目中使用 process.env.VUE_APP_[xxx] 的地方改写为 import.meta.env.VITE_[xxx] 。

另，Vue3版本 目前不支持 CDN 开启。

应用配置 ​

应用配置除了布局相关的配置外，并无太大变化，建议逐一对照修改。

至于布局相关的配置，Vue2版本 中是通过 showHeader 的开启或关闭切换头部导航布局和侧边栏布局，另外侧边栏布局还需要动态调整路由数据结构才可以实现双侧边栏布局和单侧边栏布局，而在 Vue3版本 中，统一使用 menuMode 这一参数来控制导航栏的模式，同时专业版还另外提供了 2 种模式，具体可阅读《布局 - 导航栏模式》。

主题 ​

Vue3版本 的专业版将原本把所有主题放在一个文件里，拆分成了多个主题独立文件，详细可阅读《主题》。

如果有自定义新增主题，也需要按照新的自定义主题的方式去修改。

另，主题里的配置参数名无变化。

全局资源 ​

全局资源目录结构与 Vue2版本 保持一致，迁移可直接复制并覆盖。

框架默认提供的全局组件有一定程度的优化和扩充，迁移过程中，请勿直接将全局组件目录下的文件直接覆盖，可找出自定义新增的全局组件拷贝到 Vue3版本 项目中，这样不会影响到框架默认提供的全局组件。

与服务端交互 ​

接口请求即 /src/api/index.ts 文件，由于 baseURL 和跨域代理搭配使用代码耦合较高，请勿直接覆盖文件，建议可以只复制拦截器部分代码进行替换。

跨域开启本地代理仅需要在 .env.development 文件里 VITE_OPEN_PROXY = true 开启代理即可。

Mock 部分变动较大，在 Vue2版本 里提供了 2 种方案，并且 mock 数据的配置也不一样，而在 Vue3版本 中，只需要配置一份 mock 数据，就可以同时实现原有 2 种方案的优点，唯一的缺点就是如果在 Vue2版本 的项目中如果使用了 mock ，无法直接将 mock 文件拷贝到 Vue3版本 项目中，因为数据结构和使用方式均有调整，具体可阅读《与服务端交互 - Mock》。

路由 ​

Vue3版本 的路由配置项是在 Vue2版本 上进行了扩充，也就意味着路由文件可直接拷贝到 Vue3版本 项目中。

另外在 Vue2版本 的应用配置里提供了 enableFlatRoutes 这项配置，如果原本就是开启状态，那无需注意，如果是未开启状态，那需要注意的是，在 Vue3版本 中多级路由会强制转为二级路由，可以理解为强制开启了 enableFlatRoutes: true 设置，如果你对这部分还不了解，可阅读《路由 - 基本配置 - 多级路由》。

页面缓存 ​

Vue3版本 中对页面缓存提供了更加智能的方式，从而无需像 Vue2版本 中在页面文件里手动添加缓存相关代码，只需在路由的配置项里设置 cache 以及 noCache 参数即可，具体可阅读《页面缓存》。

国际化 ​

国际化的入口文件有变化，从 Vue2版本 的 /src/lang/index.js 变为 Vue3版本 的 /src/locales/index.ts ，请比对后修改，同时语言包的目录也从 /src/lang/packages/ 变为 /src/locales/lang/ ，另外语言包的格式为 .json 文件，具体可阅读《国际化》。

最后 ​

本篇迁移文档仅对整体做简单说明，迁移项目毕竟是个庞大工程，过程中难免会出现各种无法预测的问题，建议可以加讨论群自由讨论寻求帮助。