inavo
@inavo

Почему Vue не находит компонент?

Изучаю Vue, решил собрать тестовую сборку на webpack. Тестирую на локальном сервере.
Компоненты страниц представляют собой файлы .vue
Открываю сайт, компонент главной страницы нормально подключается, а если перейти на другую страницу, например /test, то ошика "Object not found!" компонент не подключается. При этом если открывать левую страницу типа /qwerty, то компонент страницы не найдено подключается.

Структура:
template
-- dist
-- -- build.js
-- src
-- -- app
-- -- -- components
-- -- -- -- шапка, футер etc
-- -- -- pages
-- -- -- -- test-data
-- -- -- -- -- test-data.vue
-- -- -- -- main
-- -- -- -- -- main.vue
-- -- -- -- page-not-found
-- -- -- -- -- page-not-found.vue
-- -- -- -- index.js
-- -- -- App.vue
-- -- -- app-routes.js
-- -- -- main.js
-- -- public
-- -- -- index.html
-- -- webpack.config.js
index.html


Конфиг вебпак:
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    mode: 'development',
    entry: __dirname + "/src/app/main.js", // webpack entry point. Module to start building dependency graph
    output: {
        path: __dirname + '/dist', // Folder to store generated bundle
        filename: 'build.js',  // Name of generated bundle after build
        publicPath: '/' // public URL of the output directory when referenced in a browser
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }, {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ],
    devServer: {  // configuration for webpack-dev-server
        contentBase: './src/public',  //source of static assets
        port: 7700, // port to run dev-server
        historyApiFallback: true,
        hot: true
    }
};


src/app/app-routes.js:
import Vue from 'vue';
import Router from 'vue-router';

import { AppMainPage } from './pages';
import { AppPageNotFound } from './pages';
import { AppTestData } from './pages';

Vue.use(Router);

const appRoutes = [
    {
        path: '/',
        name: 'home',
        component: AppMainPage
    },
    {
        path: '/test',
        name: 'test',
        component: AppTestData
    },
    {
        path: '*',
        name: 'page-not-found',
        component: AppPageNotFound
    }
];

const routes = [...appRoutes];

export default new Router({
    mode: 'history',
    routes
});


Вот и пытаюсь понять, почему главная нормально, а /test нет?
  • Вопрос задан
  • 393 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы