踩坑记17 更新vue3.1.x到vue3.2.x 及 配套更新element-plus 等包 | 1.1.0-beta.7版本element-plus引入组件及样式

2021.8.30

坑56（npm、yarn、ncu、vue3.2.x、升级包、esbuild、element-plus）：主要是完成之前未完成的vue到3.2.x的更新（因为element-plus当时依然是基于3.1.x版本的vue，更新后会报错，详见 Uncaught SyntaxError: The requested module ‘/node_modules/.vite/vue.js?v=50ccac76‘ does not provide_Alloom的博客-CSDN博客；现在element-plus已在1.1.0-beta.2版本（2021.8.24分布更新）将vue更新到了3.2.x版本）。

具体操作：使用了ncu包进行更新，首先ncu查看可更新的包，如下

@vitejs/plugin-vue                ^1.4.0  →         ^1.6.0     

@vue/compiler-sfc                 ^3.1.5  →         ^3.2.6     

sass                             ^1.37.5  →        ^1.38.2     

vite                              ^2.4.4  →         ^2.5.1     

vite-plugin-style-import          ^1.1.1  →         ^1.2.1     

element-plus              ^1.0.2-beta.70  →  ^1.1.0-beta.7  

之后ncu -u将其更变到package.json。注意！vue3的版本更新在此处未显示（因为vue3是next版本），需要手动更改package.json中的vue版本到最新（github上查看最新版本号）；或者npm install vue@next，直接更新vue3到最新版本。

最后，npm install即可。

运行一下，npm run dev，开始报错。

events.js:352

      throw er; // Unhandled 'error' event

      ^

Error: spawn G:\Users\Administrator\VueProjects\xxx-web\node_modules\esbuild\esbuild.exe ENOENT        

    at Process.ChildProcess._handle.onexit (internal/child_process.js:269:19)

    at onErrorNT (internal/child_process.js:467:16)

    at processTicksAndRejections (internal/process/task_queues.js:82:21)

Emitted 'error' event on ChildProcess instance at:

    at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)

    at onErrorNT (internal/child_process.js:467:16)

    at processTicksAndRejections (internal/process/task_queues.js:82:21) {

  errno: -4058,

  code: 'ENOENT',

  syscall: 'spawn G:\\Users\\Administrator\\VueProjects\\xxx-web\\node_modules\\esbuild\\esbuild.exe',

  path: 'G:\\Users\\Administrator\\VueProjects\\xxx-web\\node_modules\\esbuild\\esbuild.exe',

  spawnargs: [ '--service=0.12.24', '--ping' ]

}

参考： vite events.js:292 throw er； // Unhandled ‘error‘ event Error: spawn esbuild.exe ENOENT_twinkle的博客-CSDN博客

打开到G:\Users\Administrator\VueProjects\xxx-web\node_modules\esbuild目录下，发现确实没有esbuild.exe文件。

在项目目录下运行node ./node_modules/esbuild/install.js，安装生成esbuild.exe。运行完查看对应目录，确实增添了esbuild.exe文件.

再次npm run dev，运行，新的报错。

error when starting dev server:

Error: The following dependencies are imported but could not be resolved:

  element-plus/lib/theme-chalk/index.css (imported by G:/Users/Administrator/VueProjects/xxx-web/src/main.js)

  element-plus/lib/el-popper (imported by G:/Users/Administrator/VueProjects/xxx-web/src/components/widgets/TabsNav.vue)

Are they installed?

    at optimizeDeps (G:\Users\Administrator\VueProjects\xxx-web\node_modules\vite\dist\node\chunks\dep-972722fa.js:73454:15)

    at processTicksAndRejections (internal/process/task_queues.js:95:5)

    at async runOptimize (G:\Users\Administrator\VueProjects\xxx-web\node_modules\vite\dist\node\chunks\dep-972722fa.js:74167:48)

    at async Server.httpServer.listen (G:\Users\Administrator\VueProjects\xxx-web\node_modules\vite\dist\node\chunks\dep-972722fa.js:74183:21)

错误都与element-plus相关，于是查看了它的更新日志 组件 | Element (element-plus.org) ，并做出了如下改动：

1、根据2021-08-25更新的1.1.0-beta.4版本：Rename el-submenu to el-sub-menu。将项目中所有el-submenu改为el-sub-menu。

2、根据2021-08-26更新的1.1.0-beta.7版本：Breaking changes: * Please refer to: Breaking changes made in 1.1.0-beta.1。连接： Breaking changes made in 1.1.0-beta.1 · Discussion #3020 · element-plus/element-plus · GitHub ，主要查看'如何迁移 How to migrate'部分（查看其他部分可以看到element-plus的文件组织形式/项目结构发生了较大变化）。同时参考文档'快速上手'部分 组件 | Element (element-plus.org) 和文档'国际化'部分 组件 | Element (element-plus.org)。 将main.js中 import 'element-plus/lib/theme-chalk/index.css' 改为 import 'element-plus/dist/index.css'。（到这一步，element-plus/lib/theme-chalk/index.css的错误消除了，element-plus/lib/el-popper错误还在）

3（直接删除了对element-plus/lib/el-popper的引用）、关于el-popper，文档中没有相关的信息，检查element-plus包下的文件，在G:\Users\Administrator\VueProjects\xxx-web\node_modules\element-plus\theme-chalk目录下发现el-popper.css样式文件，继续搜索，可以看到多个位置出现以popper为名的文件或文件夹。也就是存在，但无直接使用。于是直接删除了TabsNav.vue中的这句：import { Effect } from 'element-plus/lib/el-popper'。其中的Effect、el-popper均并未被使用到（不记得为什么有这一句了）。附加参考：Popover 弹出框 组件 | Element (element-plus.org) ，其基于Vue-popper开发，属性中有部分Vue-popper、popper的属性。

最后，npm run dev，运行成功。

2021.8.31更新（vite按需加载element-plus样式）：查看element-plus官方文档'快速上手'部分  组件 | Element (element-plus.org) 时，发现按需加载样式的配置方法也改变了。不过官方建议直接引入全部样式，原话：" 我们 强烈建议直接引入全部的样式文件 ，虽然这看起来会增大整个应用的体积，但这样做可以避免引入额外的打包工具插件（减少负担），你还可以通过  CDN  的方式来加载样式文件，从而使得你的应用加载更快。"另外， 按需引用样式只对按需引用的组件起效，对全局引入组件不生效。 所以此步骤仅作为尝试记录。使用的打包工具是vite。

首先，回忆一下原先的引用方法（官网已经修改没了，参考 vite+vue+elementplus安装过程遇到的问题_RadiomMl的博客-CSDN博客_element-plus 安装失败 后半段）：通过使用插件vite-plugin-style-import实现。安装插件后在vite.config.js中使用添加css或scss的对应引入代码，如果使用scss的话，还需要在main.js中添加以下代码：

import 'element-plus/packages/theme-chalk/src/base.scss'

了解原先添加了哪些代码后，就可以把这些都删去了。

现在，查看官方文档中vite的按需应用方式，安装使用vite-plugin-element-plus插件。修改vite.config.js文件如下即可：（无需再修改main.js）

import { defineConfig } from 'vite' 
import vue from '@vitejs/plugin-vue' 
import VitePluginElementPlus from 'vite-plugin-element-plus' 
// https://vitejs.dev/config/ 
export default defineConfig({ 
    plugins: [ 
        vue(), 
        VitePluginElementPlus({ 
            // 如果你需要使用 [component name].scss 源文件，你需要把下面的注释取消掉。
            // 对于所有的 API 你可以参考 https://github.com/element-plus/vite-plugin-element-plus 
            // 的文档注释 
            // useSource: true 
        }), 
    ], 
})

注意！按需引用样式 只对按需引用的组件起效，全局引用组件时，按需引用样式无效，需要对应使用全局引入样式。ps：可以在mian.js中按需引入组件，也可以在具体使用到的组件vue文件中引入。方法见文档即可。

by 莫得感情踩坑机(限定)