无法在JS文件中导入Vue文件

Question

我正在学习有关 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 文件。

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

Answer 1

该文件名为app.vue ，但您在导入时不带扩展名，从而导致您观察到的错误。

导入 SFC 时包含.vue扩展名：

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

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

Answer 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',
})

无法在JS文件中导入Vue文件

问题描述

2 个解决方案

解决方案1
0 2021-07-12 22:14:27

解决方案2
0 2021-07-12 23:01:03

无法在JS文件中导入Vue文件

问题描述

2 个解决方案

解决方案1 0 2021-07-12 22:14:27

解决方案2 0 2021-07-12 23:01:03

解决方案1
0 2021-07-12 22:14:27

解决方案2
0 2021-07-12 23:01:03