导入模块时出现意外令牌 {

Question

这是一个代码笔

通过这个导入，我得到了错误（10 行 index.vue）：

import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";

那么这里发生了什么？ 其他 ES6 导入没问题。

Answer 1

我不知道要从中导入的文件的结构，但是您是尝试导入默认值还是模块？

因为默认语法没有{} 。 很像你的第一次导入。 如果您尝试导入的内容设置为默认导出，则需要删除这些括号。

Answer 2

我在上面评论了同样的问题。 与此同时，我遇到了这个项目，想知道它为什么有效。 长话短说，它被配置为一个 SPA。 我在我的项目中尝试了同样的方法并且它有效。

所以在nuxt.config.js

export default {
  mode: "spa",
  ..

所以我猜这个问题与服务器端渲染有关。

------ 关于通用模式的一些注意事项------

由于我想在通用模式下使用我的应用程序，我还尝试进行插件的有条件导入。 请注意，下面的方法不起作用。 不过，我确实包含了它，SPA 可能不是一种选择，它可以为您指明正确的方向。

移动

import Vue from 'vue'
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
Vue.use(OrbitControls)

进入 plugins 文件夹中的threeimports.js文件并添加

  plugins: [
   { src :"~/plugins/threeimports.js", ssr: false},
  ..

到nuxt.config.js

我认为 OrbitControls 应该可以在项目的任何地方使用，但事实并非如此。 它与大括号语法有关，因为相同的机制适用于不使用括号语法的其他模块。