1

Здравствуйте!

Начал использовать vue-router, но столкнулся с ошибкой:

Vue.use is not a function

Гуглил, ничего не нашел (белый пояс по гуглу).

Все пути настроены правильно, модули установлены.

Почему возникает данная ошибка?

Код:

index.js (главный файл, точка входа для webpack)

//require modules
const Vue = require('vue');
const VueRouter = require('vue-router');

// require components
const Index = require('../public/components/Index.vue');
const Items = require('../public/components/Items.vue');
const Users = require('../public/components/Users.vue');

const routes = [
    { path: '/', component: Index},
    { path: '/vue', component: Users},
    { path: '/news', component: Items}
];

//Setup routes
Vue.use(VueRouter);
const router = new VueRouter({
    routes,
    mode: 'history'
});

// Register components
new Vue({
    el: '#app',
    router,
    render: h => h(Index)
});

Index.vue

<template>
    <div id="app">
        <h1>Index</h1>
        <hr>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        data: () => {return {}}
    }
</script>

Ошибка:

введите сюда описание изображения

webpack.config.js (возможно в конфигах не то)

 const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: __dirname + "/public/index.js",
    output: {
        path: __dirname + "/public",
        filename: 'build.js',
        library: 'index'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {}
                }
            }, {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }, {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]?[hash]'
                }
            }
        ]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    }
};

1 ответ 1

2

Что такое vue в require('vue');? Что написано в webpack?

Должно быть написано.

alias: {
  'vue$': 'vue/dist/vue.js'
}

Таким образом Вы указываете что такое vue.

Иначе указывайте путь.

require('vue/dist/vue.js');

Посмотрел config.

Меняйте как написано выше, или же используйте import вместо require.

import Vue from 'vue'

У Вас сейчас прописано

    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    }

Вот этот файл vue.esm.js это модули es6.

10
  • прописал import Uncaught TypeError: VueRouter is not a constructor ;(
    – Tvolex
    7 июл 2017 в 19:49
  • Вы какой вариант выбрали? 7 июл 2017 в 19:52
  • 1
    Так сначала по VueRouter is not a constructor, Вы VueRouter тоже должны подключить через import. 7 июл 2017 в 20:04
  • 1
    Нашел, если используете import , тогда везде его используете, сделайте вместо const Index = require('../public/components/Index.vue'); это import Index from '../public/components/Index.vue'; Ну и естественно все остальные тоже 8 июл 2017 в 10:44
  • 1
    Если в двух словах, то import это модули es6 а require модули nodeJS 8 июл 2017 в 10:46

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.