未捕获的 TypeError 导出是只读的

Question

我现在正在通过 Scrimba 的 vue 训练营工作，我似乎无法让事件总线在组件之间进行通信。转到我的页面时出现此错误

Uncaught TypeError: "exports" is read-only

完全按照视频进行操作，即使复制和粘贴他们的代码也会给我这个错误。我使用的 Vue 版本比他们使用的稍新。我正在使用版本2.6.11。

在我正在观看的视频中，他使用

import Vue from 'vue';

module.exports = new Vue();

我还尝试了我在网上找到的其他变体，包括

import Vue from 'vue';

export const EventBus = new Vue();

和其他我在网上找到的，但我每次都得到同样的错误。我在网上看到了多个教程，它们都有适用于它们的版本，但每次我都会遇到同样的错误。我现在不知道如何解决这个问题，因为我实际上已经复制并粘贴了示例并且无法使其正常工作。我不知道我是否遗漏了一些非常简单的东西或一些不太明显的东西，但我已经绕了大约一个半小时，无法弄清楚。

以下是我尝试在其中使用事件总线的组件：

产品.vue

<template>
    <div class="product-wrapper">
        <div class="product-image">
            <img :src="product.image">
        </div>
        <div class="product-name">{{ product.name }}</div>
        <div class="product-price">{{ priceFormatted }}</div>
        <div><button @click.prevent="addProduct">ADD</button></div>
    </div>
</template>

<script>
    import EventBus from '../bus'

    module.exports = {
        props: {
            product: Object
        },
        
        computed: {
            priceFormatted: function () {
                return '$' + this.product.price / 100;
            }
        },

        methods: {
            addProduct: function() {
                EventBus.$emit('add-product', this.product);
            }
        }
    }
</script>

<style scoped>
    .product-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding-bottom: 15px;
        border-bottom: 1px solid #eee;
        margin-bottom: 15px;
    }
    .product-image,
    .product-name,
    .product-price {
        margin: 0 10px;
    }
    img {
        width: 100px;
        height: 100px;
        object-fit: cover;
        border-radius: 9999px;
        border: 3px solid #fff;
    }
    button {
        background-color: #222;
        color: #eee;
        padding: 5px 10px;
        border-radius: 15px;
        margin-right: 15px;
    }
</style>

购物车.vue

<template>
    <div>
        <div>
            <ul>
                <li class="price-row">
                    <div>Old Red Friend</div>
                    <div class="quantity-row">
                        <div class="price-quantity">Qty: 2</div>
                        <div>$29.97</div>
                    </div>
                </li>
            </ul>
        </div>
        
        <div class="price-row">
            <div class="price-label">Sub-total</div>
            <div class="price-wrapper">$9.99</div>
        </div>
        <div class="price-row">
            <div class="price-label">Shipping</div>
            <div class="price-wrapper">$9.99</div>
        </div>
        <div class="price-row">
            <div class="price-label">Total</div>
            <div class="price-wrapper">$9.99</div>
        </div>
        <button class="checkout-button">CHECKOUT</button>
    </div>
</template>

<script>
    import EventBus from '../bus.js'

    module.exports = {
        data: function() {
            EventBus.$on('add-product', product => {
                this.addProduct(product);
            });

            return {
                products: []
            }
        },
        methods: {
            addProduct: function(product) {
                this.products.push(product);

                console.log(this.products);
            }
        }
    }
</script>

<style scoped>
    .quantity-row {
        display: flex;
    }
    .price-quantity {
        margin-right: 15px;
    }
    .checkout-button {
        width: 100%;
        text-align: center;
        padding: 10px 0;
        background: #000;
        color: #eee;
    }
    .price-row {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #eee;
        margin: 10px;
        padding-bottom: 10px;
    }
</style>

编辑：这是我在控制台中得到的错误输出

Answer 1

组件需要导出如下export default {}.

对于事件总线，您可以这样做：

import Vue from 'vue';
export const EventBus = new Vue();

import { EventBus } from '../bus.js';

或者这个：

import Vue from 'vue';
export default new Vue();  

import EventBus from '../bus.js';