Nuxt 按需引入 iview 报错 Unexpected token import

Question

我在 Nuxt 2 中尝试按需引入 iview 资源文件，https://www.iviewui.com/docs/guide/start，下面是我的配置过程

nuxt.config.js

  plugins: [
    '@/plugins/iview'
  ],
  build: {
    babel: {
      "plugins": [["import", {
        "libraryName": "iview",
        "libraryDirectory": "src/components",
      }]]
    },
  }

plugins/iview.js

import Vue from 'vue'
import 'iview/dist/styles/iview.css'
import { Button } from 'iview';


console.log('iView:', Button)


Vue.use(Button)


// Vue.use(iView, {
//   locale
// })

package.json

{
    "dependencies": {
        "iview": "^3.1.5",
    },
    "devDependencies": {
        "babel-plugin-import": "^1.13.0",
    }
}

启动项目后报了如下的错误，

Answer 1

在客户端引入试试

Answer 2

unexpected token import 是语法错误，也就是 JS runtime 不认 import 这个语句，基本可以判断是代码中的 import 没有转译，Node.js 不支持。

所以应该检查后加载的代码，保证是基于 CommonJS 的。