vue.js - VueJS + Nuxtjs 意外 token 'export'

Question

所以我将这段代码作为我的索引页，它可以正常工作，但几分钟后它就停止了。

错误是:

SyntaxError
Unexpected token export

在脚本部分，如果我删除我的导入，那么错误就会消失，但我需要导入它并使用它。它与正在导入的包一起工作，但我上下查看了这段代码，我不知道到底发生了什么。

有人有什么建议吗？我是不是很笨，错过了这么简单的事情？

<template>
    <section class='container'>
        <img class='my-4' src="~/assets/images/carousel/1.png" alt="card" />
        <div class='text-center mx-auto my-4'>
            <a href="/send/photo"><button> Send a card </button></a>
            <p class='subtle my-4'> Or </p>
            <a href="/open"><button class='btn-blue'> Open a card </button></a>
        </div>
        <div id="qrcode"></div>
    </section>
</template>
<script>
import qrcode from 'qrcode-generator-es6'; <<<<<<<<< SYNTAX ERROR AROUND HERE
export default{
    data : function(){
        return {};
    },
    methods : {

    },
    mounted : function(){
        const qr = new qrcode(0, 'M');
        qr.addData('https://app.voxicard.com/?v=vx-9FEFCA66-F592-4FF5-97B8-93B2FD78666D');
        qr.make();
        document.getElementById('qrcode').innerHTML = qr.createSvgTag({
            margin : 0, 
            cellColor : function(){ 
                return "#48658B";
            },
        });
    },
};
</script>
<style>
#qrcode {
    width: 200px;
    height: 200px;
    background-color: red;
}

img {
    display: block;
    max-height: 500px;
    text-align: center;
    margin: auto;
}

button {
    font-size: 125%;
}
</style>

Answer 1

在 nuxt.config.js 的 build 属性中，您需要添加一个以该库为目标的 transpile block :

build: {
  transpile: [
    'qrcode-generator-es6'
  ]
}

这是因为 nuxt 期望库导出为 CJS 模块而不是 ES6 模块。