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 you have read our privacy policy.

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