在Vue3开发中引用js文件几种常见场景的方法

更新时间：2025年08月19日 08:39:50 作者：繁若华尘

在Vue.js开发中,引用外部JavaScript文件是常见的需求,以便利用第三方库或自定义功能,这篇文章主要介绍了在Vue3开发中引用js文件几种常见场景的方法,需要的朋友可以参考下

前言

在 Vue3 中引用 JavaScript 文件的方式与 Vue2 类似，但需要注意一些 Composition API 的特性和模块化规范的变化。以下是几种常见场景的引用方法：

1. 全局引入 JS 文件

适用于需要在多个组件中使用的工具函数、配置或第三方库。

方式一：在main.js中直接引入

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import './your-global.js' // 直接引入全局JS文件

createApp(App).mount('#app')

方式二：挂载到全局属性（推荐）

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import * as yourModule from './your-module.js'

const app = createApp(App)
app.config.globalProperties.$yourModule = yourModule // 挂载到全局
app.mount('#app')

在组件中使用：

// 组件内
import { getCurrentInstance } from 'vue'

export default {
  setup() {
    const { proxy } = getCurrentInstance()
    proxy.$yourModule.someFunction() // 通过全局属性调用
  }
}

2. 局部引入 JS 文件

在需要使用的组件中直接引入：

<script setup>
// 直接导入ES模块
import { someFunction } from '@/utils/your-module.js'

// 使用函数
someFunction()
</script>

3. 引入第三方库（如非模块化JS）

方式一：通过public目录 + HTML 引入

将 JS 文件放到 public/js 目录。
在 index.html 中添加：

<head>
  <script src="/js/your-legacy-library.js"></script>
</head>

在组件中直接使用全局变量：

// 声明全局变量避免 ESLint 报错（可选）
/* global YourLibrary */

export default {
  setup() {
    YourLibrary.doSomething()
  }
}

方式二：通过 npm 安装模块化库

npm install your-library

在组件中使用：

import { someFunction } from 'your-library'

4. 动态导入（按需加载）

使用 import() 实现动态加载：

const module = await import('@/path/to/module.js')
module.someFunction()

5. 处理 CommonJS 模块

如果遇到 CommonJS 模块（如某些旧库），可以通过默认导入：

import cjsModule from 'cjs-module'
// 或者解构
const { someFunction } = require('cjs-module')

注意事项

模块化规范：优先使用 ES 模块（import/export）。
响应式数据：如需在 JS 文件中使用 Vue 的响应式系统，需显式导入 API：
```
// utils.js
import { ref } from 'vue'
export const count = ref(0)
```
TypeScript 支持：为第三方库添加类型声明（.d.ts 文件）以获得类型提示。
构建配置：若遇到特殊文件格式（如 .cjs），需在 vite.config.js 或 vue.config.js 中配置。

示例：引入 Axios

// utils/request.js
import axios from 'axios'
const instance = axios.create({ baseURL: 'https://api.example.com' })
export default instance

在组件中使用：

<script setup>
import request from '@/utils/request.js'

const fetchData = async () => {
  const res = await request.get('/data')
}
</script>

通过以上方法，你可以灵活地在 Vue3 项目中引用各种类型的 JavaScript 文件。

总结

到此这篇关于在Vue3开发中引用js文件几种常见场景方法的文章就介绍到这了,更多相关Vue3引用js文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue判断数组内是否存在某一项的两种方法
这篇文章主要介绍了Vue判断数组内是否存在某一项,今天给大家分享两种方法，分别是findIndex()和 indexOf()方法，本文结合实例代码给大家介绍的非常详细，需要的朋友可以参考下
2023-07-07
vue3中关于路由hash与History的设置
这篇文章主要介绍了vue3中关于路由hash与History的设置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
利用vue组件自定义v-model实现一个Tab组件方法示例
这篇文章主要给大家介绍了关于利用vue组件自定义v-model实现一个Tab组件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
2017-12-12
vue使用el-table筛选tree树形结构的数据问题
这篇文章主要介绍了vue使用el-table筛选tree树形结构的数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-07-07
vue中pc移动滚动穿透问题及解决
这篇文章主要介绍了vue中pc移动滚动穿透问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
elementUi vue el-radio 监听选中变化的实例代码
这篇文章主要介绍了elementUi vue el-radio 监听选中变化，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-06-06
Vue 中对图片地址进行拼接的方法
今天小编就为大家分享一篇Vue 中对图片地址进行拼接的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
这篇文章主要介绍了Vue.js 2.0 移动端拍照压缩图片预览及上传实例，本来移动端开发H5应用，准备将mui框架和Vue.js+vue-router+vuex 全家桶结合起来使用
2017-04-04
vue Watch和Computed的使用总结
本文主要介绍Vue.js中监听器和计算属性的相关知识点，包括对普通属性的监听、对对象的监听、对数组的监听，以及计算属性的Set方法，计算属性与监听器的区别等等
2021-05-05
vue 实现LED数字时钟效果（开箱即用）
这篇文章主要介绍了vue 实现LED数字时钟效果（开箱即用）,每一个数字由七个元素构成，即每一个segment元素，本文给大家分享实现实例，感兴趣的朋友一起看看吧
2019-12-12