使用 Laravel Mix Vue 编译时出错答案

【问题标题】：Getting error when compiling with Laravel Mix Vue使用 Laravel Mix Vue 编译时出错
【发布时间】：2021-05-27 21:38:04
【问题描述】：

我正在 laravel vue 中尝试简单的待办事项。这是我来自 ./resources/js/app.js 的代码

require('./bootstrap');

import Vue from 'vue'

import App from './vue/app'

const chatapp = new Vue({
    el: '#chatdiv',
    components: { App }
});

我在 ./resources/js 中创建了 vue 文件夹，并在其中添加了 app.vue 文件。

现在，当我尝试运行“npm run development”时，出现以下错误

> @ development D:\test\laravue
> mix

i Compiling Mix
ΓêÜ Mix: Compiled with some errors in 9.45s
ERROR in ./resources/js/app.js 4:0-27
Module not found: Error: Can't resolve 'vue/app' in 'D:\test\laravue\resources\js'

webpack compiled with 1 error
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `mix`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\prajw\AppData\Roaming\npm-cache\_logs\2021-02-25T13_46_36_740Z-debug.log

我的 package.json 文件包含这个

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "cross-env": "^7.0.3",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14"
    },
    "dependencies": {
        "vue": "^2.6.12"
    }
}

有人可以帮我解决这个错误吗？谢谢。

【问题讨论】：

此目录不存在，或输入错误'vue/app'请检查该部分
是的。我的错。它的'./vue/app'。编辑了问题。 vue 文件夹中 app.vue 文件的 /app 文件。

标签： laravel vue.js webpack

【解决方案1】：

Vue里面没有app文件夹，你不能导入App from ./vue/app因为vue没有app。

您可以在app.js 附近创建App.vue，然后在app.js 中导入它 import App from ./App

您的App.vue 可以是：

<template>
    <div>Hello from App!</div>
</template>
<script>
    export default {
      name: "App"
    }

</script>

【讨论】：