vue3 引入外部js

Vue.js是一款流行的JavaScript框架，它可以帮助开发者构建交互式的用户界面。在Vue.js 3中，引入外部JavaScript文件的方法与之前的版本有所不同。下面将为您详细介绍Vue.js 3中如何引入外部JavaScript文件。

在Vue.js 3中，您可以使用import语句来引入外部JavaScript文件。确保您已经将外部JavaScript文件保存在您的项目目录中。然后，在需要使用该文件的Vue组件中，使用import语句将其引入。

例如，假设您的外部JavaScript文件名为external.js，保存在项目的根目录中。要在Vue组件中引入该文件，您可以按照以下步骤进行操作：

在Vue组件的顶部，使用import语句引入外部JavaScript文件：

import externalScript from '@/external.js';

这里的@表示您的项目根目录。如果您的文件不在根目录下，而是在其他目录中，您需要相应地修改引入路径。

接下来，在Vue组件的mounted生命周期钩子函数中，使用document.createElement方法创建一个script标签，并将其添加到页面中。然后，使用setAttribute方法设置src属性为外部JavaScript文件的路径：

mounted() {
  const script = document.createElement('script');
  script.setAttribute('src', externalScript);
  document.head.appendChild(script);

这样，当该Vue组件被挂载到页面上时，外部JavaScript文件将被加载并执行。

需要注意的是，在Vue.js 3中，mounted生命周期钩子函数已经替代了之前版本中的ready钩子函数。确保您在正确的生命周期钩子函数中引入外部JavaScript文件。

以上就是在Vue.js 3中引入外部JavaScript文件的方法。通过使用import语句和document.createElement方法，您可以轻松地将外部JavaScript文件引入到Vue组件中，并在页面加载时执行它们的代码。希望这个回答对您有帮助！