将 vuetify 从 1.5 升级到 2.1 时出错

Posted 2023-02-22

【中文标题】将 vuetify 从 1.5 升级到 2.1 时出错

【英文标题】：Errors when upgrading vuetify from 1.5 to 2.1

【发布时间】：2020-03-25 00:32:28

【问题描述】：

我真的希望在这里得到一些帮助。我从一个退出的人那里继承了一个 vue/.net 核心项目，我/我们不太确定如何成功升级 vuetify。我已经做了很多谷歌搜索，但没有弄清楚如何进行。

我现在的情况是我已经执行了以下步骤来升级。在 VS Code 的“终端”中，我运行了以下命令：

npm install vuetify@latest（我看到 webpack.config 中 vuetify 的值更改为 "vuetify": "^2.1.12"） npm 审计修复（因为终端建议） npm run build（只是为了确保它可以构建）

所以，我在尝试浏览 vue 页面时遇到的错误是： 错误：Vuetify 未正确初始化

此时我编辑文件 app.js（这似乎是应用程序的入口点）并将行更改 "import Vuetify from "vuetify";" 为 " import Vuetify from 'vuetify/lib'" （正如 vuetify 文档“发布和迁移”所建议的那样）。现在出现的错误是：

./node_modules/vuetify/src/components/VCalendar/mixins/calendar-with-events.sass 1:0 中的错误 模块解析失败：意外字符“@”（1:0） 您可能需要适当的加载程序来处理此文件类型。 @import '../../../styles/styles.sass' | @import '../_variables.scss'

./node_modules/vuetify/src/components/VDatePicker/VDatePickerHeader.sass 1:0 中的错误 模块解析失败：意外字符“@”（1:0） 您可能需要适当的加载程序来处理此文件类型。 @import '../../styles/styles.sass' | | +theme(v-date-picker-header) 使用 ($material)

对于项目中使用的每种类型的 vuetify 组件，错误列表似乎都在继续

所以这就是我现在卡住的地方。我无法克服这个错误。我发现一些线程建议向 webpack.config.js 添加“规则”，但我没有设法让它们中的任何一个工作。我真的很需要帮助。 在我遇到的任何线程/文章中，该项目似乎没有使用任何“标准建议方式”设置，并且作为 .net 开发人员最初所有这些 webpack 的东西似乎真的很复杂，我需要一些指导..

我的 app.js：

import Vue from "vue";
import axios from "axios";
import router from "./router/index";
import store from "./store/store";
import  sync  from "vuex-router-sync";
import App from "components/app-root";
import  FontAwesomeIcon  from "./icons";
import Editor from "@tinymce/tinymce-vue"


Vue.component("icon", FontAwesomeIcon);
Vue.component("tinymce-editor", Editor)

Vue.prototype.$http = axios;

sync(store, router);

import globalMixins from "./components/common/mxins/global"

Vue.mixin(globalMixins)

//import Vuetify from "vuetify";
import Vuetify from "vuetify/lib";

Vue.use(Vuetify, 
theme: 
    myColor: "#545454"

);

import "vuetify/dist/vuetify.min.css";
Vue.use(require("vue-shortkey"));
var VueCookie = require('vue-cookie');
Vue.use(VueCookie);
Vue.use(VueSanitize, vueSanitizeOptions);
Vue.use(require('vue-moment'));

const app = new Vue(
store,
router,
...App
);

export  app, router, store ;

【问题讨论】：

我有 2 个请求：1) 请发布您的 app.js 文件。只需确保根据迁移指南正确使用 Vuetify 2) 迁移指南包含名为 Styles 的部分。它说你需要安装saas 包而不是node-sass。你能检查一下你是否使用了正确的 saas 包吗？

谢谢，我可以看到 node-sass 4.12.0 已经安装（不是我安装的）和 sass-loader 7.1.0。所以也许我需要根据指南安装 sass 包？我会这样做并得到结果！

也用一些代码发布了答案。请看一看。

【参考方案1】：

请参考this 迁移指南并非常仔细地按照说明进行操作。我知道升级到大版本很痛苦，所以，仔细阅读代码更改是非常必要的。

我建议对您的项目进行 2 处更改：

1) 按照 cmets 的建议，使用 sass 包而不是 node-sass。该指南建议相同。

2) 迁移指南建议了 3 种安装方式：插件安装、完全安装和 A-la-Carte 安装。我的猜测是您的安装是完整的。基于此，这是我建议的更改：

在 1.5 中，在创建最终的 app 变量时，我们不必在对象中指定 vuetify。你可以只做Vue.use(Vuetify) 就可以了。

Vue.use(Vuetify, 
 theme: 
    myColor: "#545454"
 


const app = new Vue(
  store,
  router,
  ...App
);

在2.0版本中，我们需要创建一个单独的Vuetify对象，然后添加到app变量中

import Vuetify from 'vuetify'  // For full install, DO NOT use `vuetify/lib`
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)
const vuetify = new Vuetify(
 theme: 
    myColor: "#545454"
 
)

const app = const app = new Vue(
  vuetify,
  store,
  router,
  ...App
);

再次声明，请仔细阅读迁移指南中的代码。会更有帮助。如果完全安装的说明不起作用，那么，可以尝试点菜安装说明。两者的区别在于app.js中如何导入vuetify和vueitfy.min.css中如何导入

【讨论】：

好吧，看来这有帮助！我现在收到关于某些道具过时等的所有警告，所以我将它们修复在我的“起始页”上。唯一似乎不起作用的是页面似乎没有样式。好像css没有正确加载..我怀疑它是“import vuetify/dist/vuetify.min.css”不正确..您对可能的原因有什么建议吗？

@TobyFieldgroove 很高兴我能帮上忙。请考虑通过单击tick 图标来支持此答案并接受此作为有效答案。它将帮助社区找到正确的解决方案。

我绝对会的！如果您对我的最后一个问题有任何建议，我将不胜感激！

应用程序似乎不再理解使用 Material Design 图标或颜色等...

我不确定如何解决 CSS 问题，但是，您可以尝试以下 2 个选项之一： 1) 尝试 a-la-carte install intructions 中提到的代码。这意味着删除 import vuetify.min.css 行。并使用 import Vuetify from 'vuetify/lib' 导入 vuetify 2) 阅读迁移指南中的主题 Theme。它建议更改您的主题对象。所以，代码可能看起来像Vue.use(Vuetify, theme: themes: light: myColor: "#545454"