javascript - Vuetify 版本从 1.5 升级到 2.0.18 然后出现模块未找到错误

Question

我收到此错误:

module not found error

我这样做了:

• 在我的 src/plugins/vuetify.js 文件中注释掉 import 'vuetify/src/stylus/main.styl' 。
• 添加导入'vuetify/src/styles/main.sass'
• 然后npm install sass-loader

但仍在代码中

未找到这些相关模块:

* ../../../../src/stylus/components/_date-picker-table.styl in ./node_modules/vuetify/lib/components/VDatePicker/mixins/date-picker-table.js
* ../../../src/stylus/components/_app.styl in ./node_modules/vuetify/lib/components/VApp/VApp.js
* ../../../src/stylus/components/_autocompletes.styl in ./node_modules/vuetify/lib/components/VAutocomplete/VAutocomplete.js, ./node_modules/vuetify/lib/components/VCombobox/VCombobox.js
* ../../../src/stylus/components/_badges.styl in ./node_modules/vuetify/lib/components/VBadge/VBadge.js
* ../../../src/stylus/components/_buttons.styl in ./node_modules/vuetify/lib/components/VBtn/VBtn.js
* ../../../src/stylus/components/_cards.styl in ./node_modules/vuetify/lib/components/VCard/VCard.js, ./node_modules/vuetify/lib/components/VPicker/VPicker.js and 1 other
* ../../../src/stylus/components/_chips.styl in ./node_modules/vuetify/lib/components/VChip/VChip.js
* ../../../src/stylus/components/_counters.styl in ./node_modules/vuetify/lib/components/VCounter/VCounter.js
* ../../../src/stylus/components/_data-table.styl in ./node_modules/vuetify/lib/components/VDataTable/VDataTable.js
* ../../../src/stylus/components/_date-picker-header.styl in ./node_modules/vuetify/lib/components/VDatePicker/VDatePickerHeader.js
* ../../../src/stylus/components/_date-picker-title.styl in ./node_modules/vuetify/lib/components/VDatePicker/VDatePickerTitle.js
* ../../../src/stylus/components/_date-picker-years.styl in ./node_modules/vuetify/lib/components/VDatePicker/VDatePickerYears.js
* ../../../src/stylus/components/_dialogs.styl in ./node_modules/vuetify/lib/components/VDialog/VDialog.js
* ../../../src/stylus/components/_dividers.styl in ./node_modules/vuetify/lib/components/VDivider/VDivider.js
* ../../../src/stylus/components/_footer.styl in ./node_modules/vuetify/lib/components/VFooter/VFooter.js
* ../../../src/stylus/components/_forms.styl in ./node_modules/vuetify/lib/components/VForm/VForm.js
* ../../../src/stylus/components/_grid.styl in ./node_modules/vuetify/lib/components/VGrid/VContainer.js, ./node_modules/vuetify/lib/components/VGrid/VFlex.js and 1 other
* ../../../src/stylus/components/_icons.styl in ./node_modules/vuetify/lib/components/VIcon/VIcon.js
* ../../../src/stylus/components/_inputs.styl in ./node_modules/vuetify/lib/components/VInput/VInput.js
* ../../../src/stylus/components/_labels.styl in ./node_modules/vuetify/lib/components/VLabel/VLabel.js
* ../../../src/stylus/components/_lists.styl in ./node_modules/vuetify/lib/components/VList/VList.js
* ../../../src/stylus/components/_menus.styl in ./node_modules/vuetify/lib/components/VMenu/VMenu.js
* ../../../src/stylus/components/_messages.styl in ./node_modules/vuetify/lib/components/VMessages/VMessages.js
* ../../../src/stylus/components/_overflow-buttons.styl in ./node_modules/vuetify/lib/components/VOverflowBtn/VOverflowBtn.js
* ../../../src/stylus/components/_pagination.styl in ./node_modules/vuetify/lib/components/VPagination/VPagination.js
* ../../../src/stylus/components/_pickers.styl in ./node_modules/vuetify/lib/components/VPicker/VPicker.js
* ../../../src/stylus/components/_progress-circular.styl in ./node_modules/vuetify/lib/components/VProgressCircular/VProgressCircular.js
* ../../../src/stylus/components/_progress-linear.styl in ./node_modules/vuetify/lib/components/VProgressLinear/VProgressLinear.js
* ../../../src/stylus/components/_radio-group.styl in ./node_modules/vuetify/lib/components/VRadioGroup/VRadioGroup.js
* ../../../src/stylus/components/_radios.styl in ./node_modules/vuetify/lib/components/VRadioGroup/VRadio.js
* ../../../src/stylus/components/_select.styl in ./node_modules/vuetify/lib/components/VSelect/VSelect.js
* ../../../src/stylus/components/_selection-controls.styl in ./node_modules/vuetify/lib/components/VCheckbox/VCheckbox.js, ./node_modules/vuetify/lib/components/VRadioGroup/VRadioGroup.js and 1 other
* ../../../src/stylus/components/_sheet.styl in ./node_modules/vuetify/lib/components/VSheet/VSheet.js
* ../../../src/stylus/components/_small-dialog.styl in ./node_modules/vuetify/lib/components/VDataTable/VEditDialog.js
* ../../../src/stylus/components/_subheaders.styl in ./node_modules/vuetify/lib/components/VSubheader/VSubheader.js
* ../../../src/stylus/components/_switch.styl in ./node_modules/vuetify/lib/components/VSwitch/VSwitch.js
* ../../../src/stylus/components/_tables.styl in ./node_modules/vuetify/lib/components/VDataTable/VDataTable.js
* ../../../src/stylus/components/_text-fields.styl in ./node_modules/vuetify/lib/components/VSelect/VSelect.js, ./node_modules/vuetify/lib/components/VTextField/VTextField.js
* ../../../src/stylus/components/_textarea.styl in ./node_modules/vuetify/lib/components/VTextarea/VTextarea.js
* ../../../src/stylus/components/_toolbar.styl in ./node_modules/vuetify/lib/components/VToolbar/VToolbar.js
* ../../../src/stylus/components/_tooltips.styl in ./node_modules/vuetify/lib/components/VTooltip/VTooltip.js
* ../../mixins/data-iterable in ./node_modules/vuetify/lib/components/VDataTable/VDataTable.js
* ../../mixins/maskable in ./node_modules/vuetify/lib/components/VTextField/VTextField.js
* ../../mixins/menuable.js in ./node_modules/vuetify/lib/components/VMenu/VMenu.js
* ./VCardMedia in ./node_modules/vuetify/lib/components/VCard/index.js
* ./VCardTitle in ./node_modules/vuetify/lib/components/VCard/index.js
* ./VContent in ./node_modules/vuetify/lib/components/VGrid/index.js
* ./VListTile in ./node_modules/vuetify/lib/components/VList/index.js
* ./VListTileAction in ./node_modules/vuetify/lib/components/VList/index.js
* ./VListTileAvatar in ./node_modules/vuetify/lib/components/VList/index.js
* ./VToolbarSideIcon in ./node_modules/vuetify/lib/components/VToolbar/index.js
* ./mixins/app-theme in ./node_modules/vuetify/lib/components/VApp/VApp.js
* ./mixins/body in ./node_modules/vuetify/lib/components/VDataTable/VDataTable.js
* ./mixins/foot in ./node_modules/vuetify/lib/components/VDataTable/VDataTable.js
* ./mixins/head in ./node_modules/vuetify/lib/components/VDataTable/VDataTable.js
* ./mixins/menu-activator in ./node_modules/vuetify/lib/components/VMenu/VMenu.js
* ./mixins/menu-generators in ./node_modules/vuetify/lib/components/VMenu/VMenu.js
* ./mixins/menu-keyable in ./node_modules/vuetify/lib/components/VMenu/VMenu.js
* ./mixins/menu-position in ./node_modules/vuetify/lib/components/VMenu/VMenu.js
* ./mixins/progress in ./node_modules/vuetify/lib/components/VDataTable/VDataTable.js
* ./plugins/vuetify/lib in ./src/main.js

Answer 1

问题是您没有在项目中导入Vuetify。我假设您安装了 Vuetify

将您的 vuetify.js 更改为:

import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css- 
 loader

import Vue from 'vue'
import Vuetify from 'vuetify';

Vue.use(Vuetify);

export default new Vuetify({
  icons: {
      iconfont: 'mdi'
   },
});

并将其添加到您的 main.js 中:

import 'vuetify/dist/vuetify.min.css'
import './plugins/vuetify'       //instead of import './plugins/vuetify/lib'
Vue.use(Vuetify);
const opts = {
    theme: {
        dark: false,
        themes: {
            light: {
                primary: '#...',
                secondary: '#...',
                accent:'#...',
                error: '#...',
                info: '#...',
                success: '#....',
                warning: '#....'

            },
            dark: {
                primary: '#...',
                secondary: '#...',
                accent:'...',
                ....
            }
        }
    }
};

new Vue({
    router,
    vuetify: new Vuetify(opts),
    render: h => h(App)
}).$mount('#app');

根据您的意愿更改颜色主题。我添加了 ... 颜色。

有关如何从 Vuetify 版本 1.5 迁移到 2 的更多信息，请阅读 Here

希望它能解决您的问题:)