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，运行成功。

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

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 
        }), 
    ], 
})

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