在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-element如何实现动态换肤存储
这篇文章主要介绍了vue-element如何实现动态换肤存储问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
Vue3系列教程之插槽slot详解
插槽（slot）可以说在一个 Vue 项目里面处处都有它的身影，比如我们使用一些UI 组件库的时候，我们通常可以使用插槽来自定义我们的内容，今天通过本文给大家介绍vue3插槽slot的相关知识，感兴趣的朋友一起看看吧
2022-08-08
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
这篇文章主要介绍了用vue2.x版本+adminLTE开源框架搭建后台应用模版，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-03-03
利用Vue与D3.js创建交互式数据可视化
在现代Web开发中,数据可视化是一个引人瞩目的热点领域,从简单的图表到复杂的交互式仪表盘,数据可视化能够帮助用户更好地理解数据,而Vue与D3.js的结合则为我们提供了构建这些可视化效果的强大工具,本文将向您展示如何利用Vue与D3.js创建一个基本的交互式数据可视化项目
2025-02-02
解决Vue 给mapState中定义的属性赋值报错的问题
这篇文章主要介绍了解决Vue 给mapState中定义的属性赋值报错的问题,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-06-06
详解vue 表单绑定与组件
这篇文章主要介绍了vue 表单绑定与组件的相关资料，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下
2021-03-03
vue实战中的一些实用小魔法汇总
这篇文章主要给大家介绍了关于vue实战中一些实用小魔法的相关资料,这些技巧和窍门,可以帮助你成为更好的Vue开发人员,需要的朋友可以参考下
2021-06-06
基于Vue3实现SSR(服务端渲染)功能
在现代网页开发中,用户体验日益成为网站成功的重要因素,从加载时间到SEO优化,越来越多的开发者开始关注使用服务端渲染（SSR）来提升应用的表现,本文将深入探讨 Vue 3 的 SSR 特性,并以示例代码展示如何实现这一功能,需要的朋友可以参考下
2024-11-11
Vue中父子组件通讯之todolist组件功能开发
这篇文章主要介绍了Vue中父子组件通讯——todolist组件功能开发的相关知识,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-05-05
vue中的总线机制(EventBus)解析
这篇文章主要介绍了vue中的总线机制(EventBus)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10