将 vuetify 从 1.5 升级到 2.1 时出错

Question

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

此时我已经执行了以下升级步骤。在 VS Code 的 "terminal" 中，我有运行以下命令：

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

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

此时我编辑文件 app.js（这似乎是应用程序的入口点）并更改行 "import Vuetify from "vuetify";"。 =37=] 到 "import Vuetify from 'vuetify/lib'"（如 "Releases and migrations" 的 vuetify 文档所建议）。现在出现的错误是：

ERROR in ./node_modules/vuetify/src/components/VCalendar/mixins/calendar-with-events.sass 1:0 Module parse failed: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type. @import '../../../styles/styles.sass' | @import '../_variables.scss'

ERROR in ./node_modules/vuetify/src/components/VDatePicker/VDatePickerHeader.sass 1:0 Module parse failed: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type. @import '../../styles/styles.sass' | | +theme(v-date-picker-header) using ($material)

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

这就是我现在被困的地方。我无法克服这个错误。我发现一些线程建议将 "rules" 添加到 webpack.config.js，但我没有设法让它们中的任何一个工作。实际上我非常需要帮助。这个项目似乎没有使用 "standard suggested way" 在我遇到的任何 threads/articles 中设置，并且最初是 .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 };

Answer 1

请参考 this 迁移指南并严格按照其说明进行操作。我明白升级到大版本是一件痛苦的事情，所以，仔细阅读代码的变化是非常有必要的。

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

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

2) 迁移指南推荐了三种安装方式：插件安装、完整安装和单点安装。我的猜测是你的是完整安装。基于此，这是我建议的更改：

在 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
});

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

中的导入方式

将 vuetify 从 1.5 升级到 2.1 时出错

Errors when upgrading vuetify from 1.5 to 2.1

upgrade

sass

vue.js

vuetify.js