vue3+vite+ts集成第三方js

xiaozaq

已于 2025-01-13 23:18:42 修改

阅读量696

点赞数 9

CC 4.0 BY-SA版权

分类专栏： vue cordova 文章标签： javascript 开发语言 ecmascript

于 2025-01-13 23:17:52 首次发布

本文链接：https://blog.csdn.net/xiaozaq/article/details/145126164

npm run dev可以正常运行和测试。但是npm run build会报错。

要实现引入静态js，避免使用全局变量报错。

1. HTML 引入第三方 JS

在你的 HTML 文件中，通过 <script> 标签引入一个本地第三方 JS 文件，例如：

<script src="/https/xpl520.blog.csdn.net/path/to/tools.js"></script>

tools.js文件中定义如下函数：

function exitApp(){
	if(navigator){
		if (navigator.app) {
			navigator.app.exitApp();
		} else if (navigator.device) {
			navigator.device.exitApp();
		}
	}
}

2. 声明文件（tools.d.ts）

为了在 TypeScript 项目中使用这个全局变量而不产生错误提示，你需要为这个 JS 文件创建一个类型声明文件。例如，创建一个 tools.d.ts 文件，内容如下：

declare namespace cordova {
  // 在这里定义 cordova 对象的类型和结构
  function exitApp(): void;
  // 其他需要的类型声明
}

这个文件告诉 TypeScript 存在一个 rap 全局变量，并描述了它的类型和接口。

3. 引用声明文件（env.d.ts）

在 env.d.ts 文件中使用 /// <reference path="..."/> 语法引用声明文件：

该文件在项目根目录下，直接在后面加一行。注意保留前面3个斜杠

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

xiaozaq

关注关注

9
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

DEJA_VU3D - Cesium 之 vue3+vite+ts+cesium项目搭建全过程

总得学点什么的博客

11-28

2983

本篇我们就来介绍从零开始搭建vue3+vite+ts+cesium项目

vue3 + vite + cesium教程

m0_70989202的博客

10-27

2059

/1.在cesium ion的官网中找到New York City 3D Buildings 并添加到自己的商店中。//2. 75343为该白膜数据的id。//添加官网提供的纽约的城市白膜数据。//换成自己申请的token。//创建一个地图的视图对象。//跳到白膜数据的位置。//等待数据加载完成。//添加到地图对象中。

参与评论您还未登录，请先登录后发表或查看评论

vue组件内部引入外部js文件的方法

10-15

主要介绍了vue组件内部引入外部js文件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

vite排除外部依赖，使用script标签引入

少油少盐不要辣

07-13

1802

【代码】vite排除外部依赖，使用script标签引入。

vite构建库如何生成类型声明文件

热门推荐

热爱思考、活力满满、开朗爱笑的年轻人

12-13

9万+

一绝对路径直接引入全局可用二绝对路径直接引入配置后import 引入后再使用三webpack中配置 aliasimport 引入后再使用四webpack 中配置 plugins无需 import 全局可用结论我们以 jQuery 为例，来讲解一、绝对路径直接引入，全局可用主入口页面 index.html 中用 script 标签引入： script src

Vue引入第三方js库

yiyueqinghui的博客

11-23

1万+

Vue引入第三方js库在index.html中引用script 直接在index.html中引用script，任何时候皆可用！！注意：第三方js必须放在static目录下 &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp

vue3+ts引入第三方js包，避免关键字报错

weixin_44090753的博客

09-30

3105

vue3+ts引入第三方js包，避免引入文件的关键字报错

Vue3+script setup+ts+Vite+Volar搭建项目

rdl111的博客

03-21

1415

目录使用 Vite 创建 vue + ts 项目 Vue 3 的三种语法 Option API Composition API script setup（Composition API 的语法糖）安装 Volar 结尾好久没有写了，最近看到Vue3.2 发布了，害，又要开始卷了么。其实我自己本身还没有使用过Vue3 做过实际的项目开发，然鹅又出新东西了……，新时代农民工真的是左手工作，右手游戏，还要用jio去学习呢。什么？你说谈对象？ xswl，我特么一个农民工

配置vue3+vite+eslint+prettierrc项目

weixin_54000091的博客

12-06

1866

以上步骤适用于所有的vue3项目，因为仅仅上续功能仅仅是编译时检测而非运行时检测所以用任何打包工具编译项目运行都是没问题的。

vue3+ts import引入第三方js文件报错解决方法

qq_37656005的博客

02-06

9933

执行 import XXX from ‘XXX.js’ 报错，The requested module ‘xxx.js’ does not provide an export named ‘default’ 可能是第三方文件不支持模块化标准，不能按需导入。在所需的.vue文件里单独引入，最后在head标签里生成js和css，离开页面时移除。在index.html里利用script全局引入。

vue项目经验：引入外部js文件（第三方js工具或者jq库）

weixin_45031595的博客

12-07

1万+

方法一:静态资源导入（或者cdn资源加载）在public文件夹下的index.html文件使用script标签对插件进行引用。可以是项目中的静态资源，也可以是远程资源。例如： //本地静态资源，直接放在public文件夹下 <script type="text/javascript" src="./wangEditor.min.js"></script> //cdn资源加载 <script type="text/javascript" src="https://unpk

在Vue3开发中如何引用js文件

繁若华尘的博客

02-20

3016

在 Vue3 中引用 JavaScript 文件的方式与 Vue2 类似，但需要注意一些 Composition API 的特性和模块化规范的变化。

vite项目中使用第三方js文件本地化使用

weixin_45315794的博客

12-29

2万+

vite项目中使用第三方js文件包，文件本地化引用在vite项目中使用第三方包，将其本地化，在index.html文件中使用script引用本地js文件，那么这个js文件包如何放置和如何引用呢？在js代码中用js文件包，使用绝对路径，又是如何操作的呢？方法一：将文件包放置在public中即可，无任何操作 1、第三方js文件包放置的文件在vite项目中，我们可以将第三方文件包放置在根目录下的public文件(项目中没有，自己创建）下。 2.在html中引用方式： /lib/文件包.js 这种方式是最简

vue 三级联动（引入外部js）（element-ul插件）

m0_72189003的博客

10-17

2017

vue三级联动（引入外部js）

uniapp vue3.0 通过import引入外部js(sdk)文件undefined

m0_47791238的博客

05-30

5389

在使用 uniapp 导入 SDK 的过程中，您可能会遇到这样的情况：使用 console.log() 打印导入的模块名称时，实际输出的名称并不是您期望的名称。这是因为 uniapp 进行了编译和打包处理后，会将代码重新命名以减小文件大小和提高执行效率，包括修改变量名称、方法名称、模块名称等。在使用 uniapp 引入第三方库或模块时，如果没有指定导入名称，为了避免命名冲突,则小程序编译工具将会在该名称前面补充一个重命名，这样就导致方法找不到。

vue3+vite+ts实现视频监控

01-03

在Vue3、Vite和TypeScript环境中构建视频监控应用，你可以按照以下步骤操作： 1. **环境设置**: - 安装Node.js和Yarn或npm，这两个工具是管理项目依赖的基础。 - 使用`vue create my-project`命令创建一个新的Vue3项目，并选择包含 TypeScript 的选项。 2. **引入Vite**: - 在项目根目录下安装Vite CLI，然后初始化vite.config.ts文件配置Vite的构建流程。 ```bash npm install -D vite @vitejs/plugin-vue typescript ``` 3. **启用TypeScript**: - 在项目的根目录中创建一个`tsconfig.json`文件，配置TypeScript编译选项。 - 修改`vite.config.ts`，添加对TypeScript的支持。 4. **安装Vue3和相关库**: - 添加Vue3、Vuex（状态管理）和Vuex-ORM（数据库适配）等必要的依赖。 ```bash npm install vue@next vuex vuex-orm vue-router axios @types/vue @types/vuex @types/vuex-orm ``` 5. **创建组件**: - 创建`VideoMonitor.vue`组件来显示实时视频流，可以利用第三方如OBS Studio或其他WebRTC库来获取视频源。 - 使用`<video>`标签嵌入视频，并可能需要处理播放、暂停和错误事件。 6. **Vuex state management**: - 设计Vuex store，用于存储视频的状态（例如是否正在播放、是否连接等），以及任何相关的数据。 7. **API集成**: - 编写API接口调用，从服务器获取视频流地址或其他监控信息。这通常通过axios发送HTTP请求。 8. **错误处理**: - 使用try-catch块处理网络错误、权限问题或其他潜在异常。 9. **样式管理**: - 可能的话，使用CSS-in-JS库（如@vue/cli-plugin-vuetify或Element Plus）来编写UI样式。