Связывание index.html с main.js файл

#javascript #html #vite

Вопрос:

Веб-страница пуста, main.js файл не связан, несмотря на то, что они находятся в одной папке. Используется Npt, а Vite используется для 3D-эффектов, камер и т. Д.

index.html код:

 lt;!DOCTYPE htmlgt; lt;html lang="en"gt;  lt;headgt;  lt;meta charset="UTF-8" /gt;  lt;link rel="icon" type="image/svg xml" href="favicon.svg" /gt;  lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /gt;  lt;titlegt; Abd lt;/titlegt;  lt;/headgt;  lt;bodygt; hello  lt;canvas id="bg"gt;lt;/canvasgt;  lt;script type="module" src="/main.js"gt;lt;/scriptgt;  lt;/bodygt; lt;/htmlgt;

код style.css:

 canvas {   position: fixed;  top: 0;  left: 0;  }

main.js код: импорт ‘./style.css’

 import * as THREE from 'three'; const scene = new THREE.Scene();   const camera = new THREE.PerspectiveCamera( 75, window.innerWidth /  window.innerHeight, 0.1, 1000);   const renderer = new THREE.WebGLRenderer({  canvas: document.querySelector('#bg'), });    renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight );   camera.position.setZ(30);  renderer.render( scene,camera ); const geometry = new THREE.TorusGeometry( 10,3,16,100) const material = new THREE.MeshBasicMaterial( {color:  0xFF6347,wireframe:true}); const torus=new THREE.Mesh( geometry,material);  scene.add(torus)    function animate() {  requestAnimationFrame( animate );  renderer.render(scene,camera); }  animate()

Пустая веб — страница-javascript не связан

1. Ты пробовал src="main.js" ?

2. Вы проводите тестирование локально? Проверьте консоль браузера на наличие ошибок CORS.

3. @SvenCazier Как я могу это сделать?

4. @AbdullahAhmed Для большинства, если не для всех браузеров в Windows (и Linux) ctrl shift j, на Mac, независимо от того, что ctrl shift переводится в j. Или вы можете щелкнуть правой кнопкой мыши на странице, нажать проверить, а затем перейти на вкладку консоль. Если у вас есть сообщение красным цветом, в котором говорится что-то о CORS: это проблема безопасности с модулями.

Ответ №1:

Находятся ли эти файлы в корневой папке вашего сайта? Использование a / в вашем URL-адресе сообщает HTML, что ваш файл найден там. Если это ваша проблема, вы должны быть в состоянии решить ее, просто изменив /main.js на main.js .

Ответ №2:

Попробуйте поставить: lt;script src=".js-path"gt; lt;/scriptgt; в свой lt;headgt; раздел

если файл сценария находится в другом каталоге, вы можете получить к нему доступ, поставив "./" перед путем к сценарию

Ответ №3:

есть пара вещей, на которые вам нужно обратить внимание. Прежде всего, модули JavaScript позволяют разделить программу на несколько последовательностей операторов и деклараций. lt;script type=modulegt; используется для загрузки модулей JavaScript внутри веб-страниц.

Чтобы связать файл Javascript с вашим HTML-файлом, вы должны использовать lt;scriptgt; тег с scr атрибутом. Поскольку файл javascript находится в той же папке, что и файл HTML, вы можете написать тег следующим образом: lt;script src="main.js"gt; .

Удачи, мой друг.

1. тип=»модуль» укажите, что файлы js будут анализироваться как модули, и импорт ES6 может использоваться в приложении, без этого импорт не будет работать. Ошибка в атрибуте src, если файлы находятся в одной папке «./main.js» следует использовать