时间戳

首页 > 解决方案 > 将 vuetify 从 1.5 升级到 2.1 时出错

vue.js - 将 vuetify 从 1.5 升级到 2.1 时出错

问题描述

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

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

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

此时我编辑文件 app.js（这似乎是应用程序的入口点）并更改“import Vuetify from "vuetify";”行 到“从'vuetify/lib'导入Vuetify”（如“发布和迁移”的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 };

标签： vue.jssassupgradevuetify.js

解决方案

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

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

1) 正如评论中所建议的，使用sass包而不是 node-sass。该指南建议相同。 迁移指南的屏幕截图

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

在 1.5 中，在创建 finalapp变量时，我们不必在对象中指定 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
});

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

推荐阅读