在 Nuxt 组件内使用花括号导入答案

【问题标题】：Importing with curly braces inside a Nuxt component在 Nuxt 组件内使用花括号导入
【发布时间】：2021-02-04 05:00:50
【问题描述】：

我正在尝试在 Nuxt 组件中导入 Three.js。

<script>
import * as THREE from "three";
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
..

虽然第一行有效，但第二行给了我一个“Unexpected token {” - 语法错误，所以

const { OrbitControls } = require('three/examples/jsm/controls/OrbitControls')

导入的语法（第一个版本）是根据 Three.js 文档。

【问题讨论】：

【解决方案1】：

我通过复制我在另一个线程中给出的答案来回答我自己的问题：link

与此同时，我遇到了这个 project 并想知道它为什么有效。 长话短说，它被配置为 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 应该可以在项目的任何地方使用，但事实并非如此。它与花括号语法有关，因为相同的机制适用于其他不使用括号语法的模块。

【讨论】：