在Vue3開(kāi)發(fā)中引用js文件幾種常見(jiàn)場(chǎng)景的方法
更新時(shí)間：2025年08月19日 08:39:50 作者：繁若華塵
在Vue.js開(kāi)發(fā)中,引用外部JavaScript文件是常見(jiàn)的需求,以便利用第三方庫(kù)或自定義功能,這篇文章主要介紹了在Vue3開(kāi)發(fā)中引用js文件幾種常見(jiàn)場(chǎng)景的方法,需要的朋友可以參考下
前言
在 Vue3 中引用 JavaScript 文件的方式與 Vue2 類(lèi)似，但需要注意一些 Composition API 的特性和模塊化規(guī)范的變化。以下是幾種常見(jiàn)場(chǎng)景的引用方法：
1. 全局引入 JS 文件
適用于需要在多個(gè)組件中使用的工具函數(shù)、配置或第三方庫(kù)。
方式一：在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')
在組件中使用：
// 組件內(nèi)
import { getCurrentInstance } from 'vue'
export default {
setup() {
const { proxy } = getCurrentInstance()
proxy.$yourModule.someFunction() // 通過(guò)全局屬性調(diào)用
}
}
2. 局部引入 JS 文件
在需要使用的組件中直接引入：
<script setup>
// 直接導(dǎo)入ES模塊
import { someFunction } from '@/utils/your-module.js'
// 使用函數(shù)
someFunction()
</script>
3. 引入第三方庫(kù)（如非模塊化JS）
方式一：通過(guò)public目錄 + HTML 引入
- 將 JS 文件放到
public/js目錄。 - 在
index.html中添加：
<head> <script src="/js/your-legacy-library.js"></script> </head>
- 在組件中直接使用全局變量：
// 聲明全局變量避免 ESLint 報(bào)錯(cuò)（可選）
/* global YourLibrary */
export default {
setup() {
YourLibrary.doSomething()
}
}
方式二：通過(guò) npm 安裝模塊化庫(kù)
npm install your-library
在組件中使用：
import { someFunction } from 'your-library'
4. 動(dòng)態(tài)導(dǎo)入（按需加載）
使用 import() 實(shí)現(xiàn)動(dòng)態(tài)加載：
const module = await import('@/path/to/module.js')
module.someFunction()
5. 處理 CommonJS 模塊
如果遇到 CommonJS 模塊（如某些舊庫(kù)），可以通過(guò)默認(rèn)導(dǎo)入：
import cjsModule from 'cjs-module'
// 或者解構(gòu)
const { someFunction } = require('cjs-module')
注意事項(xiàng)
- 模塊化規(guī)范：優(yōu)先使用 ES 模塊（
import/export）。 - 響應(yīng)式數(shù)據(jù)：如需在 JS 文件中使用 Vue 的響應(yīng)式系統(tǒng)，需顯式導(dǎo)入 API：
// utils.js import { ref } from 'vue' export const count = ref(0) - TypeScript 支持：為第三方庫(kù)添加類(lèi)型聲明（
.d.ts文件）以獲得類(lèi)型提示。 - 構(gòu)建配置：若遇到特殊文件格式（如
.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>
通過(guò)以上方法，你可以靈活地在 Vue3 項(xiàng)目中引用各種類(lèi)型的 JavaScript 文件。
總結(jié)
到此這篇關(guān)于在Vue3開(kāi)發(fā)中引用js文件幾種常見(jiàn)場(chǎng)景方法的文章就介紹到這了,更多相關(guān)Vue3引用js文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue-element如何實(shí)現(xiàn)動(dòng)態(tài)換膚存儲(chǔ)
這篇文章主要介紹了vue-element如何實(shí)現(xiàn)動(dòng)態(tài)換膚存儲(chǔ)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
插槽（slot）可以說(shuō)在一個(gè)?Vue?項(xiàng)目里面處處都有它的身影，比如我們使用一些UI?組件庫(kù)的時(shí)候，我們通?？梢允褂貌宀蹃?lái)自定義我們的內(nèi)容，今天通過(guò)本文給大家介紹vue3插槽slot的相關(guān)知識(shí)，感興趣的朋友一起看看吧2022-08-08
詳解用vue2.x版本+adminLTE開(kāi)源框架搭建后臺(tái)應(yīng)用模版
這篇文章主要介紹了用vue2.x版本+adminLTE開(kāi)源框架 搭建后臺(tái)應(yīng)用模版，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
利用Vue與D3.js創(chuàng)建交互式數(shù)據(jù)可視化
在現(xiàn)代Web開(kāi)發(fā)中,數(shù)據(jù)可視化是一個(gè)引人矚目的熱點(diǎn)領(lǐng)域,從簡(jiǎn)單的圖表到復(fù)雜的交互式儀表盤(pán),數(shù)據(jù)可視化能夠幫助用戶(hù)更好地理解數(shù)據(jù),而Vue與D3.js的結(jié)合則為我們提供了構(gòu)建這些可視化效果的強(qiáng)大工具,本文將向您展示如何利用Vue與D3.js創(chuàng)建一個(gè)基本的交互式數(shù)據(jù)可視化項(xiàng)目2025-02-02
解決Vue 給mapState中定義的屬性賦值報(bào)錯(cuò)的問(wèn)題
這篇文章主要介紹了解決Vue 給mapState中定義的屬性賦值報(bào)錯(cuò)的問(wèn)題,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
這篇文章主要介紹了vue 表單綁定與組件的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
vue實(shí)戰(zhàn)中的一些實(shí)用小魔法匯總
這篇文章主要給大家介紹了關(guān)于vue實(shí)戰(zhàn)中一些實(shí)用小魔法的相關(guān)資料,這些技巧和竅門(mén),可以幫助你成為更好的Vue開(kāi)發(fā)人員,需要的朋友可以參考下2021-06-06
基于Vue3實(shí)現(xiàn)SSR(服務(wù)端渲染)功能
在現(xiàn)代網(wǎng)頁(yè)開(kāi)發(fā)中,用戶(hù)體驗(yàn)日益成為網(wǎng)站成功的重要因素,從加載時(shí)間到SEO優(yōu)化,越來(lái)越多的開(kāi)發(fā)者開(kāi)始關(guān)注使用服務(wù)端渲染（SSR）來(lái)提升應(yīng)用的表現(xiàn),本文將深入探討 Vue 3 的 SSR 特性,并以示例代碼展示如何實(shí)現(xiàn)這一功能,需要的朋友可以參考下2024-11-11
Vue中父子組件通訊之todolist組件功能開(kāi)發(fā)
這篇文章主要介紹了Vue中父子組件通訊——todolist組件功能開(kāi)發(fā)的相關(guān)知識(shí),非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-05-05
這篇文章主要介紹了vue中的總線機(jī)制(EventBus)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10