1.前端Vue的环境配置

1.1 通过cdn方式直接在js代码中引入Vue和Vue-3d-model（新手推荐使用）

<script src="https://unpkg.com/vue-3d-model/dist/vue-3d-model.umd.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

在HTML文件中引入这两行代码后便可以使用。

1.2 整体的前端代码

这里为了方便就直接将模型文件与HTML文件放在了同一文件夹中。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"></head> <body> <div id="app"> <model-obj src="LeePerrySmith.obj"></model-obj> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> <script src="https://unpkg.com/vue-3d-model/dist/vue-3d-model.umd.js"></script> <script> new Vue({ el: '#app' }); </script> </body>

1.3 效果

2. 学习中遇到的bug

由于第一次接触前端，所以在一些环境配置问题中遇到了一些不熟悉的bug和小麻烦。

2.1 Failed to load resource: net::ERR_FAILED

这时直接打开HTML文件浏览器一片空白。调出开发者工具发现有报错：

这时由于浏览器跨域加载本地文件报错，有报错信息可以看出跨域请求只支持：http, data, chrome-extension, edge, https, chrome-untrusted。不支持文件形式。

2.2 解决办法：基于nodejs的http-server，以http的形式加载文件

1.安装node.js，直接去官网下载node中文网
2.使用npm/cnpm安装http-server；运行 npm install http-server -g
3.开始使用：cd到启动的静态项目目录，这里我的HTML以及模型文件在E盘。

4. 执行http-server/hs启动，结果显示如下

5. 此时在浏览器中访问http://127.0.0.1:8081 或 http://10.1.1.232:8081启动即可查看你想运行的代码。此时3d文件成功显示出来。

3. Vue及Vue-3d-model官方教程及下载：

Vue：Vue官方教程

Vue-3d-model：Vue-3d-model下载

原文链接：https://blog.csdn.net/weixin_45749480/article/details/119778281?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165934461816782391881984%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165934461816782391881984&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-7-119778281-null-null.nonecase&utm_term=%E6%90%AD%E5%BB%BAcdn

原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/6992