结合 Laravel + Vue.js我得到错误："Module not found: Error: Can't resolve './vue/app'"

Question

我做的一切都和这个视频https://www.youtube.com/watch?v=UHSipe7pSac一样但我得到了这个错误，我cmd:(./resources/js/app.js 4:0-28中出现"ERROR模块未找到:错误:Can't resolve '。/vue/app' in 'D:ospdomainslaravel-todolistresourcesjs'Webpack编译时出现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

你可能在使用ve3和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', [
//
]);

Answer 2

我在同一教程中遇到了类似的问题，并尝试了解决方案，但我的错误仍然没有解决。

这就是我所做的。我用了- 1.

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

• 2. 我重新安装了npm install的npm，因为我被告知有些包没有安装。
• 3. 我用npm install vue重新安装vue，
• 4. 我做了npm run dev，最后npm run watch。

Answer 3

1. 删除项目文件夹中的node_modules文件夹

2. 删除C:UsersAppDataRoaming和C:UsersAppDataLocal paths.中的npm和npm-cache文件夹

3. 使用npm install重新安装节点模块

4. 安装Vue包npm install vue。在webpack.mix.js文件中替换这个(因为它是mix版本6.0)

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

与

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

5. 运行npm run hot.，错误应该消失

Answer 4

1. Replace

   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', [
   //
   ]);
   

2. 在命令提示符

   中运行以下命令

   npm i vue-loader 
   

Answer 5

在我的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', [
//
]);

但是当我运行npm run dev或npm run watch时，我仍然得到错误经过几个小时的搜索，我发现我使用的是Vue -loader 17和Vue 2。如果您想使用Vue 2, Vue -loader的最新支持版本是15,Vue -loader 16及以上版本纯粹是为Vue 3制作的。我降级到vue-loader 15.9.8，一切都是绿色的。