记录Vue3-Admin-Template升级步骤

当前vue3-admin-template项目是由vue@3.1.2、vue-router@4、vuex@4.0.0等等组合完成的。下面展示具体的package.json

{
  "dependencies": {
    "@vueuse/core": "^4.10.0",
    "axios": "^0.21.1",
    "element-plus": "^1.0.2-beta.48",
    "mockjs": "^1.1.0",
    "normalize.css": "^8.0.1",
    "nprogress": "^0.2.0",
    "throttle-debounce": "^3.0.1",
    "vue": "^3.1.2",
    "vue-router": "4",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "@types/node": "^15.0.3",
    "@vitejs/plugin-vue": "^1.2.2",
    "@vue/compiler-sfc": "^3.0.5",
    "@vue/eslint-config-standard": "^6.1.0",
    "eslint": "^8.6.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-babel": "^5.3.1",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-promise": "^6.0.0",
    "eslint-plugin-vue": "^8.2.0",
    "prettier": "^2.5.1",
    "sass": "^1.32.12",
    "unplugin-auto-import": "^0.16.7",
    "unplugin-vue-components": "^0.25.2",
    "vite": "2.3.7",
    "vite-plugin-mock": "2.8.0",
    "vue-tsc": "^0.0.24"
  }
}

---

前言

当我准备给当前模版添加一些新功能时，打开vscode 进行下包操作，居然发生了如下报错。我的心拔凉拔凉的啊，接口一看package.json更凉了，Element-plus都已经更新到2.5.0了，我的还是1.0.2-beta.4还是beta版本！！！虽然通过npm强制安装还可以用，但是不符合我这爱折腾的性格。就忍不了它版本低，就要用最新版本！！！

不能忍！！！

于是下定决心，全面升级！！！

• 错误原因

  “npm ERR! code ERESOLVE” 错误通常发生在执行 npm install 或者 npm ci 命令时，表示在解析依赖时发生了问题。可能的原因包括：

  依赖版本冲突：不同依赖包要求使用相同的包的不同版本，导致冲突。
  依赖解析问题：npm 无法正确解析依赖包的版本。

• 解决方案

  删除 package-lock.json 或 npm-shrinkwrap.json 文件： 这两个文件包含了项目依赖的详细信息，有时会导致版本冲突。尝试删除这两个文件，并执行 npm install 或者 npm ci 命令重新安装依赖。

  使用 npm 安装代替 yarn 安装： 如果你使用的是 yarn 来安装依赖，可以尝试使用 npm 来替代，因为在某些情况下，npm 可能能够更好地解决依赖问题。

  检查依赖版本： 检查项目依赖的版本，确保它们是兼容的，没有版本冲突。可以尝试升级或降级某些依赖版本，以解决冲突。

  清除 npm 缓存： 使用 npm cache clean --force 命令清除 npm 的缓存，有时缓存中的旧数据可能导致依赖解析问题。

  使用 --legacy-peer-deps 参数： 在执行 npm install 或者 npm ci 命令时，可以尝试添加 --legacy-peer-deps 参数，该参数可以让 npm 在解析依赖时不考虑 peerDependencies。

• 强制安装

  npm install --legacy-peer-deps

---

首当其冲我手动更改了package.json中的vue、vite、element-plus版本

1. Vue

   "vue": "^3.1.2" => "vue": "^3.4.14"
   

   查看当前vue最新稳定版本

2. Vite

   "vite": "2.5.10" => "2.9.16"
   

   由于我的node版本是18.17.1的，所以不敢将vite直接升级到5.0版本，所以使用npm install vite让它自己更新到合适的最新版本。

3. Element-Plus

   "element-plus": "^1.0.2-beta.48" => "element-plus": "^2.5.0"
   

改完版本号，npm instal ，居然安装成功了！

npm run dev 起飞！！！

就炸了！！！翻车！！！

没事，小问题看着应该是element-plus升级后将一些文件路径改了，查看文档。

/* /src/main.js */
// 删除↓
import 'element-plus/lib/theme-chalk/index.css'
// 改成↓
import 'element-plus/dist/index.css'

/* /src/App.vue */
// 删除↓
import locale from 'element-plus/lib/locale/lang/zh-cn'
// 改成↓
import locale from 'element-plus/dist/locale/zh-cn.mjs'

再次npm run dev 起飞！！！

good！！！飞起来了！

但是由于beta版本和正式版本一些组件出入还是挺大的，页面也报了很多警告。下面一起来更改吧。

1. 首先 还是先改下icon的问题吧，element-plus的icon都需要从@element-plus/icons-vue引入了

   npm install @element-plus/icons-vue
   

2. 封装一个ElIcons组件

   // /src/components/ElIcons.vue
   
   <template>
     <el-icon :size="size" :color="color">
       <component :is="name"></component>
     </el-icon>
   </template>
   
   <script>
   import { defineComponent } from 'vue'
   // import * as Icons from '@element-plus/icons'
   import * as ElementPlusIconsVue from '@element-plus/icons-vue'
   
   export default defineComponent({
     components: ElementPlusIconsVue,
     name: 'ElIcons',
     props: {
       name: {
         type: String,
         required: true
       },
       size: {
         type: String,
         default: ''
       },
       color: {
         type: String,
         default: ''
       }
     }
   })
   </script>
   

3. 修改MenuItem

   <template>
   	// ...other code
   		<app-link v-else-if="showMenuType === 1" :to="pathResolve">
         <el-menu-item :index="pathResolve" v-if="!menu.children[0].children || menu.children[0].children.length === 0">
           <ElIcons v-if="menu.children[0].meta.icon || menu.meta.icon" :name="menu.children[0].meta.icon || menu.meta.icon" />
           <!-- <i
             :class="menu.children[0].meta.icon || menu.meta.icon"
             v-if="menu.children[0].meta.icon || menu.meta.icon"
           ></i> -->
           <template #title>{{ menu.children[0].meta.title }}</template>
         </el-menu-item>
         <el-sub-menu v-else :index="pathResolve">
           <template #title>
             <!-- <i
               :class="menu.children[0].meta.icon || menu.meta.icon"
               v-if="menu.children[0].meta.icon || menu.meta.icon"
             ></i> -->
             <ElIcons v-if="menu.children[0].meta.icon || menu.meta.icon" :name="menu.children[0].meta.icon || menu.meta.icon" />
             <span>{{ menu.children[0].meta.title }}</span>
           </template>
           <menu-item v-for="(item, key) in menu.children[0].children" :key="key" :menu="item" :basePath="pathResolve" />
         </el-sub-menu>
       </app-link>
   	// ...other code
   </template>
   
   <script setup name="menu-item">
     // ...
   	import ElIcons from '@/components/ElIcons.vue'
     
     // ...
   </script>
   

​ 以此类推，将用到的icon 进行替换

警告处理

// vite.config.js
import { defineConfig } from 'vite'
 
export default defineConfig({
  define: {
    // enable hydration mismatch details in production build
    __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'true'
  }
})

Vue3.4+报Feature flag VUE_PROD_HYDRATION_MISMATCH_DETAILS is not explicitly defined… 处理-CSDN博客

至此，升级基本完成，其他问题等到时候用到了，再一个个根据报错就搜索修改吧~

一次简单的记录升级过程…