结合 Laravel + Vue.js 我得到错误：“找不到模块：错误：无法解析 './vue/app'”

Question

我完全按照这个视频https://www.youtube.com/watch?v=UHSipe7pSac做的一切， 但我收到这个错误我 cmd :(“./resources/js/app.js 4:0-28 模块中的错误未找到：错误：无法解析 'D:\osp\domains\laravel-todolist\resources\js' webpack 中的 './vue/app' 编译时出现 1 个错误”和浏览器控制台中的错误“未捕获的错误：找不到模块'./vue/app'”。

这是带有我的代码的简短概述视频https://www.youtube.com/watch?v=zZqYJaIgau4

我在 /resources/js/ 文件夹中创建了文件夹 /vue/ 并在此处放置了带有代码的文件“app.vue”

<template><div>Hello</div></template> <script>export default {}</script>

然后在 /resources/js/app.js 文件中我导入 Vue 实例和我的模板文件。

require('./bootstrap');
import Vue from 'vue';
import App from './vue/app';

const app = new Vue({
    el: '#app',
    components: { App }
})

请帮助了解问题出在哪里:(

Answer 1

您可能正在将 Vue3 与 Laravel Mix 6 一起使用，因此，简而言之，在您的webpack.mix.js 中，而不是这样：

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

用这个：

mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);