如何在Vue项目中导入一个模块

Question

我创建了一个名为 script.js 的文件，用于创建自定义鼠标轨迹。在普通的 HTML 项目中，我会在 标签的末尾输入以下代码来使用它。

<script src="./mouseTrail.js" type="module"></script>

如何在Vue项目中实现相同的结果而不出现错误？

The target environment doesn't support dynamic import() syntax so it's not possible to use the external type 'module' within a script

以下是 mouseTrail.js 文件。它并不完整，但包含了重要的代码。

import {
  Polyline,
  Renderer,
  Transform,
  Geometry,
  Program,
  Mesh,
  Vec3,
  Vec2,
  Color
} from 'https://cdn.jsdelivr.net/npm/ogl@0.0.25/dist/ogl.mjs';

const vertex = `
  attribute vec3 position;
  attribute vec3 next;
  attribute vec3 prev;
  attribute vec2 uv;
  attribute float side;

  uniform vec2 uResolution;
  uniform float uDPR;
  uniform float uThickness;

  vec4 getPosition() {
      vec2 aspect = vec2(uResolution.x / uResolution.y, 1);
      vec2 nextScreen = next.xy * aspect;
      vec2 prevScreen = prev.xy * aspect;

      vec2 tangent = normalize(nextScreen - prevScreen);
      vec2 normal = vec2(-tangent.y, tangent.x);
      normal /= aspect;
      normal *= 1.0 - pow(abs(uv.y - 0.5) * 1.9, 2.0);

      float pixelWidth = 1.0 / (uResolution.y / uDPR);
      normal *= pixelWidth * uThickness;


      float dist = length(nextScreen - prevScreen);
      normal *= smoothstep(0.0, 0.02, dist);

      vec4 current = vec4(position, 1);
      current.xy -= normal * side;
      return current;
  }

  void main() {
      gl_Position = getPosition();
  }
`

- Eduardo Garcia

---

你是如何创建这个项目的？在 mouseTrail.js 中导入了任何内容吗？ - stellr42

使用Vue CLI创建了该项目，而mouseTrail文件通过CDN导入了一些OGL模块。'import {Polyline,renderer,Vec3,Vec2} from 'cdn链接' - Eduardo Garcia

你能发布mouseTrail.js的内容吗？ - stellr42

当然。 - Eduardo Garcia

Answer 1

尝试通过 npm 安装 ogl 模块，而不是通过 http 链接获取模块：

npm install --save ogl

import { ... } from 'ogl';

- Kapcash