Question

npm install @supermap/iclient3d-vue-for-webgl安装成功， 在main.ts文件里面引入 // 引入webgl3d组件包 import '@supermap/iclient3d-vue-for-webgl/lib/theme/index.css' import webgl3d from "@supermap/iclient3d-vue-for-webgl" app.use(webgl3d) 运行项目报错，如下 [plugin:vite:import-analysis] Failed to resolve import "@supermap/iclient3d-vue-for-webgl/lib/theme/index.css" from "src\main.ts". Does the file exist? 提示找不到@supermap/iclient3d-vue-for-webgl/lib/theme/index.css，经确认node_modules包管理里面确实没有@supermap/iclient3d-vue-for-webgl/lib/theme/index.css文件

Answer 1

您好，

您这边使用的是2.0还是3.0的VUE呢？

2.0的话您根据我们官方的博客去进行安装即可：

https://blog.csdn.net/supermapsupport/article/details/123850171

3.0的话建议您这边参考这个：

https://blog.csdn.net/supermapsupport/article/details/119785454

另外，不要把两个产品搞混。

SuperMap_iClient3D_VUE_for_WebGL和 SuperMap iClient3D for WebGL 的安装不一样的。

Comments

您好，项目使用的是"vue": "^3.2.38"+"typescript": "~4.7.4"+"vite": "^3.0.9"+ "@supermap/iclient3d-vue-for-webgl": "^1.1.5"，
 

3.0的话建议您这边参考这个：

https://blog.csdn.net/supermapsupport/article/details/119785454 这个项目使用的是脚手架创建项目，

加入 Cesium 环境

将 SuperMap iClient3D for WebGL 包中的 Cesium 放到 Vue 项目的 static (Vue 2.0) 或者public (Vue 3.0) 目录下。
main里面怎么引入已没有说，使用的也是Cesium
现在想知道的是你们@supermap/iclient3d-vue-for-webgl能不能使用，怎么使用

 

---

如何使用的话，您这边查看这个API

https://www.supermapol.com/earth/vue-iEarth/examples/docs/dist/zh/api/guide/installation.html

是 SuperMap_iClient3D_VUE_for_WebGL 在3.0当中使用的详细说明

---

唉，参照的技术https://www.supermapol.com/earth/vue-iEarth/examples/docs/dist/zh/api/guide/installation.html的npm方式，这又回到初始问题了，使用npm安装npm install @supermap/iclient3d-vue-for-webgl   -D，在main.ts文件里面引入 // 引入webgl3d组件包 import '@supermap/iclient3d-vue-for-webgl/lib/theme/index.css' import webgl3d from "@supermap/iclient3d-vue-for-webgl" app.use(webgl3d) 运行项目报错，如下 [plugin:vite:import-analysis] Failed to resolve import "@supermap/iclient3d-vue-for-webgl/lib/theme/index.css" from "src\main.ts". Does the file exist? 提示找不到@supermap/iclient3d-vue-for-webgl/lib/theme/index.css，经确认node_modules包管理里面确实没有@supermap/iclient3d-vue-for-webgl/lib/theme/index.css文件

---

您好，经过测试确定是没问题的。

请您这边确定npm安装是否正确是否成功，node.js的版本是否符合要求

或者说您这边有没有把这个包给复制到里面？

---

您好，

"dependencies": {

    "element-plus": "^2.2.18",

    "mitt": "^3.0.0",

    "pinia": "^2.0.21",

    "vue": "^3.2.38",

    "vue-router": "^4.1.5"

  },

  "devDependencies": {

    "@supermap/iclient3d-vue-for-webgl": "^1.1.5",

    "@types/node": "^16.11.56",

    "@vitejs/plugin-vue": "^3.0.3",

    "typescript": "~4.7.4",

    "unplugin-auto-import": "^0.11.2",

    "unplugin-vue-components": "^0.22.8",

    "vite": "^3.0.9",

  }

node版本：v18.6.0
public：已把安装包node_modules里面的@supermap文件夹public/Cesium复制到项目根目录public文件夹

---

还是说不支持typescript+vite创建的项目，只支持vue -cli创建的项目

---

确认是支持的。

请确定npm是否部署成功
typescript您可以参考http://qa.supermap.com/105923?show=105923#q105923

如果还是不行，您这边可以把操作步骤录屏到百度网盘发给我

---

您好，分享链接：https://pan.baidu.com/s/1aVA7QDUOR7cOnBWZbmbaXw
提取码：sm17
--来自百度网盘超级会员V4的分享

---

您好，

这个报错是vite+vue3在引入css时经常出现的问题

引入时的css的路径您需要再次确定一下

或者您把theme文件夹复制到index.html同级的public目录下，然后使用

public/theme/index.css 这个路径去调用

---

您好，问题是npm安装的，node_modules包管理里面都找不到@supermap/iclient3d-vue-for-webgl/lib/theme/index.css，lib文件夹里面都没有theme/index.css，依赖又需要，上面我问的一直也是找不到@supermap/iclient3d-vue-for-webgl/lib/theme/index.css的问题哦

---

方便远程吗，或者您私信我一个联系方式，QQ或者微信。

---

1.使用npm组件库及UI依赖： npm install @supermap/iclient3d-vue-for-webgl  element-plus -D
2. 在node_module里找到组件包，复制node_module/@supermap/iclient3d-vue-for-webgl/public/Cesium文件夹到项目根目录下的public文件夹中
3. 在 index.html 中：
<link href="Cesium/Widgets/widgets.css" rel="stylesheet">
<script src="Cesium/Cesium.js" ></script>
4.引入 Vue-iClient3D-WebGL在 main.js 中：
// 引入ui依赖
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
app.use(ElementPlus)
// 引入webgl3d组件包
import '@supermap/iclient3d-vue-for-webgl/lib/theme/index.css'
import webgl3d from "@supermap/iclient3d-vue-for-webgl"
app.use(webgl3d)
5.测试在App.vue里测试代码:
<sm3d-viewer scene-url="http://www.supermapol.com/realspace/services/3D-ZF_normal/rest/realspace"><sm3d-measure></sm3d-measure></sm3d-viewer>

如果包有问题则下载最新的webgl包， 将WebGL包中的Build文件夹中的Cesium文件夹拷贝到static目录，进行替换即可