Vue 是一個(gè)流行的 JavaScript 庫(kù)，用于構(gòu)建現(xiàn)代化的 web 應(yīng)用程序。在開(kāi)發(fā) Vue 應(yīng)用程序時(shí)，有時(shí)需要在代碼中導(dǎo)入本地 JavaScript 文件，這是非常常見(jiàn)的。本文將介紹如何在 Vue 中導(dǎo)入本地 JavaScript 文件。

首先，在 Vue 項(xiàng)目中創(chuàng)建一個(gè)名為 js 的目錄，用于存儲(chǔ)所有本地 JavaScript 文件。將需要導(dǎo)入的 JavaScript 文件復(fù)制到這個(gè)目錄中。

// 示例 JavaScript 文件
function foo() {
console.log('This is a local JavaScript file.');
}

接下來(lái)，在 Vue 組件中導(dǎo)入本地 JavaScript 文件。有兩種方法可以實(shí)現(xiàn)這一點(diǎn)。

方法一：使用 import 語(yǔ)句

在需要導(dǎo)入本地 JavaScript 文件的 Vue 組件中，可以使用 ES6 的 import 語(yǔ)句來(lái)導(dǎo)入文件。按照以下方式導(dǎo)入文件：

// 導(dǎo)入本地 JavaScript 文件
import { foo } from '@/js/local.js';
export default {
name: 'MyComponent',
methods: {
myMethod() {
foo();
}
}
}

在上面的示例中，使用 import 語(yǔ)句將 local.js 文件導(dǎo)入到組件中。然后，可以在 Vue 組件的方法中使用 foo 函數(shù)。注意，文件路徑使用了別名‘@’，常規(guī)配置中這是一個(gè)指向根目錄的別名，so，上述代碼等效于：

import { foo } from '../../js/local.js';

方法二：使用 script 標(biāo)簽

另一種導(dǎo)入本地 JavaScript 文件的方法是使用 script 標(biāo)簽。在 Vue 組件中使用 script 標(biāo)簽并指定 JavaScript 文件的路徑：

export default {
name: 'MyComponent',
mounted() {
const script = document.createElement('script');
script.src = '@/js/local.js';
document.body.appendChild(script);
},
methods: {
myMethod() {
foo();
}
}
}

上述代碼中，使用 script 標(biāo)簽加載本地 JavaScript 文件，然后添加到文檔中。在 mounted 鉤子函數(shù)中，script 標(biāo)簽被添加到 body 中。然后，在組件的方法中，可以使用 foo 函數(shù)。

這兩種方法都可以在 Vue 中導(dǎo)入本地 JavaScript 文件。選擇哪種方法取決于個(gè)人偏好和項(xiàng)目要求。