Vue js 构建失败

Posted 2023-02-22

【中文标题】Vue js 构建失败

【英文标题】：Vue js build is failing

【发布时间】：2019-11-23 17:55:24

【问题描述】：

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

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

ERROR 编译失败，出现 1 个错误 7:54:59 PM

./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);

知道这里发生了什么吗？

【参考方案1】：

你已经很接近了，但是你在导入时遗漏了一些东西

所以

来自

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

到

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

你缺少 vue 扩展

【讨论】：

很好看。可以配置 Webpack 的加载器来测试 .vue 扩展（实际上，它是 Vue CLI v3 构建中的默认值），但从错误消息来看，Laravel 版本似乎没有该功能。

其实我对 Vue js 了解不多。我只是在 laravel 应用程序中使用了几个组件

谢谢，你是对的。在一个单独的项目（仅 vue 和我用于学习目的的项目）中，我在没有 .vue 扩展名的情况下导入，这就是为什么我认为它可以在另一个项目上工作而从未考虑过。你知道为什么吗？现在错误消失了，但是在加载路线时我仍然什么也没看到，有什么想法吗？

别介意，我从未在 app.blade.php 文件中添加 <router-view></router-view>。