Vue JS構建失敗

Question

我有一個使用Laravel制作的現有Web應用程序。 我正在將項目的前端移至Vuejs。 因此，我將視圖app.blade.php修改為：

@include('layout.header')
<div id="app">
    <router-view></router-view>
</div>
@include('layout.footer')

我的web.php路由文件現在是：

Route::get('/{any}', function() {
    return view('layout.app');
})->where('any', '.*');

在resources/js/我有使用Vue-router的路由文件（已安裝）：

import NotFound from './pages/NotFound'
import Home from "./pages/Home"


export default {
    mode: 'history',

    routes: [
        {
            path: '*',
            component: NotFound
        },
        {
            path: '/',
            component: Home
        }
    ]
}

而我的app.js文件是：

import './bootstrap'
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'

Vue.use(VueRouter)

const app = new Vue({
    el: '#app',
    router: new VueRouter(routes)
});

為了進行測試，我在resources\\js\\pages創建了一個簡單的Home.vue組件。 這是組件：

<template>
    <div>
        <h1>This is home</h1>
    </div>
</template>

<script>
    export default {}
</script>

但它永遠不會加載。 編譯時出現以下錯誤：

錯誤編譯失敗，出現1個錯誤，下午7:54:59

./resources/js/pages/Home.js中的錯誤

模塊構建失敗（來自./node_modules/babel-loader/lib/index.js）：錯誤：ENOENT：無此類文件或目錄，打開'/Users/bigweld/Sites/championshiprecords/resources/js/pages/Home.js “

@ ./resources/js/routes.js 2：0-32 10：15-19 @ ./resources/js/app.js @ multi ./resources/js/app.js ./resources/sass/app.scss

順便說一句，我的webpack.mix.js很簡單：

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .copy('resources/images', 'public/images', true);

知道這里發生了什么嗎？

Answer 1

您非常接近，但是在導入時丟失了一些東西

所以

從

import NotFound from './pages/NotFound'
import Home from "./pages/Home"

至

import NotFound from './pages/NotFound.vue'
import Home from "./pages/Home.vue"

您缺少vue擴展名