Question

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

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

npm install vuetify @ latest（我在webpack.config中将vuetify的值更改为“ vuetify”：“ ^ 2.1.12”）
npm审核修复程序（因为终端建议了）
npm运行构建（只是为了确保它能够构建）

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

这时，我编辑文件app.js（似乎是应用程序的入口点），并将行“ import Vuetify从” 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'   |   | +主题（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）如注释中所建议，请使用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

将vuetify从1.5升级到2.1时出现错误

1 个答案: