尝试从vuetify.js导入所选组件时未找到依赖项

时间:2017-07-29 09:35:50

标签: javascript webpack vuejs2 vuetify.js

尝试从vuetify.js导入选定的模块时如下:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.androidodemo.MainActivity">
    <TextView
        android:id="@+id/text_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefg"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

webpack会抛出错误:

import Alerts               from 'vuetify/src/components/alerts';
import App                  from 'vuetify/src/components/app';
import Avatars              from 'vuetify/src/components/avatars';
似乎vuetify.js使用&#39;〜&#39;它的别名项目。

如何解决我的项目中的这个问题,并且能够使用第三方项目的单个组件?

我已经尝试设置&#39;〜&#39;别名来源:

These dependencies were not found:
* ~util/helpers in ./node_modules/vuetify/src/components/avatars/index.js, ./node_modules/vuetify/src/components/cards/index.js and 14 others
* ~directives in ./node_modules/vuetify/src/components/lists/VListTile.js, ./node_modules/vuetify/src/components/menus/VMenu.js
* ~directives/click-outside in ./node_modules/vuetify/src/components/selects/VSelect.js
* ~directives/ripple in ./node_modules/vuetify/src/components/selection-controls/VCheckbox.js
* ~mixins/themeable in ./node_modules/vuetify/src/components/app/VApp.js, ./node_modules/vuetify/src/components/cards/VCard.js and 12 others
...
To install them, you can run: npm install --save ~util/helpers ~directives ~directives/click-outside ~directives/ripple ...

但它不起作用。

1 个答案:

答案 0 :(得分:0)

我通过添加以下配置解决了这个问题:

    resolve: {
        modules: ['./node_modules', './node_modules/vuetify/src'],
        alias: {
            '~': './app',
            '~components': 'components',
            '~directives': 'directives',
            '~mixins': 'mixins',
            '~stylus': 'stylus',
            '~util': 'util'
        },
    },