在Vue3开发中引用js文件几种常见场景的方法
作者：繁若华尘
在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文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！