Vue 프로젝트 - 잡히지 않은 TypeError: 사용자 정의 js 스크립트에서 null 속성('offsetWidth' 읽기) 오류를 읽을 수 없습니다.

Question

그래서 사용자 정의 HTML 템플릿을 vuejs 프로젝트로 변환했습니다. 홈페이지에서 사용하고 싶은 CSS와 js 파일을 모두 가져왔습니다. CSS 파일이 잘 로드됩니다. JS 파일의 경우 테마에는 일부 사용자 정의 js 스크립트와 Three.js 등과 같이 일반적으로 사용되는 라이브러리가 함께 제공됩니다. 이 모든 것을 스크립트 태그의 HomeComponent 아래로 가져왔습니다. 그런데 다음 오류가 발생했습니다.

으아악

여기 내 App.vue 코드가 있습니다:

으아악

여기 내 homecomComponent.vue 코드가 있습니다(일부 - 일부 코드는 템플릿 내부에 숨겨져 있습니다):

으아악

문제는 데모3.js 파일에 있습니다.

Demo3.js

으아악

그래서 내 앱이 전혀 로드되지 않습니다. 이제 이 문제를 어떻게 해결해야 할지 모르겠습니다. HTML 템플릿을 vuejs로 변환하는 것은 이번이 처음입니다. 나는 무엇을 기대해야할지 모르겠습니다. 파일 구조 스크린샷 (https://i.stack.imgur.com/dKzTb.png)

console.log의 오류 세부정보 스크린샷 (https://i.stack.imgur.com/9Rzap.png)

Answer 1

앱이 DOM을 렌더링하기 전에 demo3.js 文件（并执行它）。因此元素 #scene 尚不存在，导致为 null을 가져옵니다.

다양한 솔루션:

1. mounted 挂钩后动态导入 demo3.js 파일:
에서 찾을 수 있습니다.

으아아아

2. 함수 안에 demo3.js 코드를 래핑하고 내보냅니다.

으아아아 으아아아

3. demo3.js 코드를 vue 구성 요소로 이동하고 템플릿 참조를 사용합니다.

으아아아