动态交互网站 Vite+Vanilla js+Three

感谢教程创作者:Fireship

搭建Vite:

$ npm init vite
// 实时预览
$ npm run dev

安装Three

$ npm install three

部署:

$ npm run build

Vite会默认把静态文件生成在dist文件夹下

教程使用了Vite来创建脚手架,还是挺新鲜的,遇到的最大问题是Vite+Vanilla js 如何正确部署并上传到我的服务器,研究了很长时间,学习笔记:

1 . Vite默认网站文件是位于根目录,如果需要放在服务器其他目录下,需要在项目目录中创建vite.config.js文件,内容为:

// vite.config.js
export default {
    "base": "./",
  }

有了这个文件,执行build后,dist文件夹内容就可以放到服务器任意目录了,“./”应该也可替换成静态url。

2. 下一个问题是链接文件没有移动到dist文件夹中,这样就算在生产环境可打开页面,图片无法显示,解决方法是在项目目录中创建public文件夹,把图片放入,图片在main.js中仍以“./xxx.jpg”的格式存在,在build的时候Vite会将图片置入dist目录中。参考:

const spaceTexture = new THREE.TextureLoader().load('./space.jpg');
scene.background = spaceTexture;