js文件中无法导入vue文件答案

【问题标题】：Can't import Vue file in JS filejs文件中无法导入vue文件
【发布时间】：2021-09-21 14:16:01
【问题描述】：

我正在学习有关 PHP + Vue 开发的教程，但我遇到了必须在 app.js 文件中导入 Vue 文件的问题。执行 npm run hot 时，终端说找不到模块。完全错误：

找不到模块：错误：无法解析“C:\xampp\htdocs\first-app\first-app\resources\js”中的“./vue/app”

我的文件夹结构如下：

resources/
├─ css/
├─ js/
│  ├─ app.js <-- File where I import the Vue file
│  ├─ vue/
│  │  ├─ app.vue <-- Vue file
├─ views/
│  ├─ welcome.blade.php  <-- View where I import app.js

app.vue，有问题的 Vue 文件：

<template>
  <div>Hello</div>
</template>

<script>
export default {}
</script>

App.js，我尝试导入Vue文件的文件：

require('./bootstrap');

import Vue from 'vue'
import App from './vue/app'

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

最后是welcome.blade.php，我使用app.js文件的地方：

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>
    </head>
    <body class="antialiased">
        <div id="app">
            <app></app>
        </div>
    </body>
    <script src="{{ mix('js/app.js') }}"></script>
</html>

还需要注意的是，我使用的是 VSCode，当我尝试自动完成时，导入不起作用。它确实能识别 vue 文件夹，但不能识别其中的 app.vue 文件。

谁能发现我做错了什么？任何答案将不胜感激！

【问题讨论】：

标签： javascript php laravel vue.js laravel-mix

【解决方案1】：

该文件名为app.vue，但您导入它时没有扩展名，导致您观察到的错误。

在导入 SFC 时包括 .vue 扩展：

// import App from './vue/app' ❌

import App from './vue/app.vue' ✅

【讨论】：

【解决方案2】：

首先可以在resources/app.js上注册app组件，然后就可以使用了。

require('./bootstrap');

import Vue from 'vue'
Vue.component('app', require('./vue/app.vue').default);

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

【讨论】：