将 vuetify 从 1.5 升级到 2.1 时出错

Question

我真的希望在这里得到一些帮助。我从一个退出的人那里继承了一个 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 };

Answer 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中如何导入