Vue3引入Vuetify后项目无法正常编译的解决

最近想用Electron给知乎做一个电脑端App,使用到了Vuetify组件库

项目组成:

  • 应用框架Electron v13
  • 响应式框架Vue3
  • 状态管理Vuex
  • 事件总线Mitt
  • TypeScript+JavaScript混编
  • vue-cli
  • electron-bulider
  • Webpack 5
  • NodeJs v14.18.1

但是按照官方文档的步骤将Vuetify add到了项目中之后,webpack编译无法进行(直接卡在了最开始的时候),并且之后我手动去掉相关import Vuetify的代码,还是给我如图的错误。

img

↓尝试重新安装Vuetify 提示我不能覆盖安装

img

解决问题

大概分析了一下:初次安装vuetify时我选择安装了nightly bulid,怀疑是这个选择安装的nightly bulid引起module缺失,因此我想重新安装vuetify的3.0.0-beta版本来覆盖掉这个nightly bulid版本。

重新安装并不顺利,vue-cli由于检测到nightly-build而拒绝安装3.0.0-beta。

既然覆盖的路走不通,于是决定卸掉vuetify重装。

卸载的过程更加不顺利,我翻遍了vue-cli的文档和help指令,没有找到卸载命令:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
D:\zhihu\zhihu>vue -h
Usage: vue <command> [options]

Options:
-V, --version output the version number
-h, --help display help for command

Commands:
create [options] <app-name> create a new project powered by vue-cli-service
add [options] <plugin> [pluginOptions] install a plugin and invoke its generator in an already created project
invoke [options] <plugin> [pluginOptions] invoke the generator of a plugin in an already created project
inspect [options] [paths...] inspect the webpack config in a project with vue-cli-service
serve alias of "npm run serve" in the current project
build alias of "npm run build" in the current project
ui [options] start and open the vue-cli ui
init [options] <template> <app-name> generate a project from a remote template (legacy API, requires
@vue/cli-init)
config [options] [value] inspect and modify the config
outdated [options] (experimental) check for outdated vue cli service / plugins
upgrade [options] [plugin-name] (experimental) upgrade vue cli service / plugins
migrate [options] [plugin-name] (experimental) run migrator for an already-installed cli plugin
info print debugging information about your environment
help [command] display help for command

Run vue <command> --help for detailed usage of given command.

在stackoverflow上查找,高赞回答:

1
I've asked about this (How does one uninstall a plugin? #2540) and it appears the current official advice is to issue an npm uninstall X.

没用,反而污染了我的node_modules!

最后只能手动移除vuetify。(全局搜索之后全部删除,非常麻烦,期间多次误伤了依赖链上的其他模块)


在解决了问题后,vue3对应vuetify beta版本的开发体验实在是一言难尽。

  1. 构建时没有处理标签的src attribute指向,仍然错误的维持在了编译前我指定的项目文件位置,导致图片全部404。
  2. 使用vue的内置组件包裹reactive数据驱动的v-for,元素退出时每次都会触发child.el.getBoundingClientRect is not a function内部错误。
  3. 已经import style情况下,字体图标莫名缺失,导致组件图标空白,最后只能cdn引入mdi的css。
  4. 官方开发文档和指南全是英文,虽然阅读没有任何障碍,但是影响阅读速度。
  5. 组件一些事件不能触发,如alert框的关闭按钮。
  6. 通过generator强行用空白的示例文件覆盖我已经写了很久的同名项目文件。如果我没有通过git强行回滚,后果将不堪设想。