在 Vue 3 和 Laravel 的“vue”中找不到导出“默认”（导入为“Vue”）

Posted 2023-03-14

【中文标题】在 Vue 3 和 Laravel 的“vue”中找不到导出“默认”（导入为“Vue”）

【英文标题】：export 'default' (imported as 'Vue') was not found in 'vue' in Vue 3 and Laravel

【发布时间】：2021-07-08 04:46:02

【问题描述】：

我将创建一个 Laravel 8 + Vue JS 3 混合项目。我已经设置了所有内容，但是当我npm run watch 时，出现如下错误。我尝试了各种方法来查看一些论坛，但仍然出错。谁能帮帮我？

./resources/js/components/index.js 6:2-15 中的警告 在“vue”中找不到导出“default”（导入为“Vue”）（可能的导出：BaseTransition、Comment、Fragment、KeepAlive、Static、Suspense、Teleport、Text、Transition、TransitionGroup、callWithAsyncErrorHandling , callWithErrorHandling, camelize,....

./js/components/ExampleComponent.vue

<template>
    <div>
        <h1>Test</h1>
    </div>
</template>

<script>
    export default 
        mounted() 
            console.log('Component mounted.')
        
    
</script>

./js/components/index.js

import Vue from 'vue';
import Card from './Card';
import Button from './Button';

// Components global.
[
  Card,
  Button,
].forEach(Component => 
  Vue.component(Component.name, Component)
)

./js/app.js

require('./bootstrap');

window.Vue = require('vue');
import './components';

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

const app = new Vue(
    el: '#app'
);

webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js').vue()
   .sass('resources/sass/app.scss', 'public/css');

   if(!mix.inProduction()) 
      mix.sourceMaps();
      mix.webpackConfig( devtool: 'source-map')
      .options(
         processCssUrls: false
      );
   

【问题讨论】：

这能回答你的问题吗？ "export 'default' (imported as 'Vue') was not found in 'vue'

查看本教程以了解没有 vue-cli 的 Vue v3 设置：frontendguruji.com/blog/…

【参考方案1】：

你的代码应该是这样的：

./js/app.js

require('./bootstrap');
import  createApp  from 'vue';

import components from  './components';
import ExampleComponent from './components/ExampleComponent.vue'

let app=createApp(ExampleComponent)
app.use(components)


app.mount("#app")

./js/components/index.js

这是一个全局注册组件的插件

import Card from './Card';
import Button from './Button';

// Components global.

export default 
  install: (app, options) => 
    [
  Card,
  Button,
].forEach(Component => 
  app.component(Component.name, Component)
)