js文件中无法导入vue文件
Posted
技术标签:
【中文标题】js文件中无法导入vue文件【英文标题】：Can't import Vue file in JS file 【发布时间】：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 文件。
谁能发现我做错了什么？任何答案将不胜感激！
【问题讨论】：
【参考方案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',
)
【讨论】：
以上是关于js文件中无法导入vue文件的主要内容，如果未能解决你的问题，请参考以下文章
Vue JS 路由器组件 - 在路由之间导航后无法重用使用 webpack 导入的 JS 文件