Nuxt.js generate and Three.js - SyntaxError: Cannot use import statement outside a module

Question

我正在使用 Nuxt.js 创建一个完整的静态登录页面，我还使用 Three.js 在页面中呈现 3d 地球仪，在开发模式和生产模式下一切正常在本地，但是当我尝试使用 yarn generate 部署到 netlify 以创建完整的静态站点时，它显示此错误：

function (exports, require, module, __filename, __dirname) { import { SyntaxError: Cannot use import statement outside a module at new Script (vm.js:88:7) at createScript (vm.js:261:10) at Object.runInThisContext (vm.js:309:10) at wrapSafe (internal/modules/cjs/loader.js:1040:15) at Module._compile (internal/modules/cjs/loader.js:1101:27) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10) at Module.load (internal/modules/cjs/loader.js:985:32) at Function.Module._load (internal/modules/cjs/loader.js:878:14) at Module.require (internal/modules/cjs/loader.js:1025:19) at require (internal/modules/cjs/helpers.js:72:18) at /Users/herow/Web-Projects/arpen-technologies/node_modules/vue-server-renderer/build.prod.js:1:77662 at Object.<anonymous> (webpack:/external "three/examples/jsm/controls/OrbitControls.js":1:0) at __webpack_require__ (webpack/bootstrap:25:0) at Module.37 (pages/index.js:22:25) at __webpack_require__ (webpack/bootstrap:25:0) at Module.38 (pages/index.vue:21:0)

这引用了我在 Three.js 组件中所做的导入：

import * as THREE from 'three'

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

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

import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'

import { GlitchPass } from 'three/examples/jsm/postprocessing/GlitchPass.js'

我在这里从 jsm 文件夹 导入插件，我尝试从 js 文件夹导入它，但后来我得到 THREE is not defined 错误.

不知道什么意思。请指导我。

Answer 1

您必须将以下行添加到 Nuxt.config.js 文件的构建部分：

build:{
transpile:[“three”]
}

这应该可以解决问题！[=11=]

Nuxt.js generate and Three.js - SyntaxError: Cannot use import statement outside a module

Nuxt.js generate and Three.js - SyntaxError: Cannot use import statement outside a module

three.js

vue.js

netlify

nuxt.js

nuxtjs