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 莫得感情踩坑机(限定)

Logo

前往低代码交流专区

更多推荐