javascript - Vue js 构建失败

Question

我有一个使用 Laravel 制作的现有网络应用程序。我正在将项目的前端移动到 Vuejs。所以我将我的 View 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>

但它永远不会加载。编译时出现以下错误:

ERROR Failed to compile with 1 errors 7:54:59 PM

error in ./resources/js/pages/Home.js

Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: ENOENT: no such file or directory, open '/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 扩展