如何在Vue项目中导入模块

vaqhlq81  于 2022-12-27  发布在  Vue.js
关注(0)|答案(1)|浏览(260)

我创建了一个script.s文件,用来创建一个自定义鼠标轨迹。在普通的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 external type 'module' within a script

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();
  }
`
zdwk9cvp

zdwk9cvp1#

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

npm install --save ogl
import { ... } from 'ogl';

相关问题