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)
});

出于测试目的，我在Home.vue中创建了一个简单的resources\js\pages组件。这是组件：

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

<script>
    export default {}
</script>

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

ERROR编译失败，出现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

您非常接近，但是在导入时丢失了一些东西

SO

从

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

TO

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

您缺少vue扩展名

Vue js构建失败

1 个答案: