如何在vue里面引入外部Js

在Vue项目中引入外部JS的方式有很多种，主要有以下几种方式：1、在index.html中直接引入、2、在Vue组件中引入、3、通过Webpack配置引入、4、使用Vue.prototype或Vue.mixin进行全局引入。其中，在index.html中直接引入是一种非常常见且简单的方法。下面将详细讲解这些方法的具体操作和相关背景信息。

一、在`index.html`中直接引入

这种方法是最简单的，只需在Vue项目的public/index.html文件中，通过<script>标签引入外部JS文件即可。具体步骤如下：

打开public/index.html文件。
在<head>或<body>标签中插入如下代码：
```
<script src="path/to/external.js"></script>
```

解释：

这种方法适用于引入一些CDN链接的JS库，例如jQuery、Bootstrap等。
引入的外部JS文件会在项目启动时加载，因此可以在任意Vue组件中使用。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue App</title>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
</head>
<body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>
</html>

二、在Vue组件中引入

这种方法是将外部JS文件直接在Vue组件中通过import语句引入，适用于模块化的JS文件。

在Vue组件文件中，通过import语句引入外部JS文件：
```
import externalJs from 'path/to/external.js';
```

解释：

这种方法适用于需要在特定组件中使用的JS文件。
引入的JS文件可以通过组件的生命周期钩子来初始化和使用。

示例：

<template>
  <div>
    <!-- Your template code -->
  </div>
</template>
<script>
import externalJs from '@/assets/js/external.js';
export default {
  name: 'MyComponent',
  mounted() {
    externalJs.init();
  }
}
</script>

三、通过`Webpack`配置引入

如果你的项目是通过Vue CLI创建的，可以通过Webpack配置来引入外部JS文件。

在vue.config.js文件中，添加如下配置：

const webpack = require('webpack');
module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
      })
    ]
  }
};

解释：

这种方法适用于需要在整个项目中全局使用的外部JS库。
使用Webpack配置可以确保JS文件在构建过程中正确处理。

示例：

// vue.config.js
const webpack = require('webpack');
module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
      })
    ]
  }
};

四、使用`Vue.prototype`或`Vue.mixin`进行全局引入

这种方法是通过Vue.prototype或Vue.mixin将外部JS库挂载到Vue实例上，便于在所有组件中使用。

在main.js文件中，通过Vue.prototype或Vue.mixin进行全局引入：

import Vue from 'vue';
import externalJs from 'path/to/external.js';
Vue.prototype.$externalJs = externalJs;
new Vue({
  render: h => h(App),
}).$mount('#app');

解释：

这种方法适用于需要在所有组件中使用的外部JS库。
通过Vue.prototype或Vue.mixin可以方便地在组件中访问和使用外部JS库。

示例：

// main.js
import Vue from 'vue';
import App from './App.vue';
import externalJs from '@/assets/js/external.js';
Vue.prototype.$externalJs = externalJs;
new Vue({
  render: h => h(App),
}).$mount('#app');
// 在组件中使用
<template>
  <div>
    <!-- Your template code -->
  </div>
</template>
<script>
export default {
  name: 'MyComponent',
  mounted() {
    this.$externalJs.init();
  }
}
</script>

总结

通过上述四种方法，Vue项目可以灵活地引入外部JS文件。1、在index.html中直接引入适用于简单的全局JS库，2、在Vue组件中引入适用于模块化的JS文件，3、通过Webpack配置引入适用于全局使用的外部JS库，4、使用Vue.prototype或Vue.mixin进行全局引入适用于在所有组件中访问的外部JS库。用户可以根据项目需求选择合适的方法进行引入，从而提升开发效率和项目的可维护性。建议在实际项目中结合使用多种方法，以实现最佳的代码结构和性能。

相关问答FAQs：

1. 在Vue中如何引入外部JS文件？

在Vue中引入外部JS文件有几种方法，下面是其中两种常用的方法：

方法一：使用script标签引入外部JS文件

在Vue的HTML文件中，可以使用script标签来引入外部JS文件。首先，在Vue的项目目录中找到public文件夹，将外部JS文件放置在public文件夹中，然后在Vue的HTML文件中使用script标签引入：

<script src="/js/external.js"></script>

这里的"/js/external.js"是外部JS文件在public文件夹中的路径。引入后，你可以在Vue的组件中使用外部JS文件中定义的函数或变量。

方法二：使用import语句引入外部JS文件

在Vue中，也可以使用ES6的import语句来引入外部JS文件。首先，在Vue的项目目录中找到src文件夹，然后将外部JS文件放置在src文件夹中。接下来，在Vue的组件中使用import语句来引入外部JS文件：

import external from './external.js';

这里的"./external.js"是外部JS文件在src文件夹中的相对路径。引入后，你可以在Vue的组件中使用外部JS文件中定义的函数或变量。

2. 在Vue中如何使用外部JS文件中的函数？

一旦成功引入外部JS文件，你就可以在Vue的组件中使用外部JS文件中定义的函数。下面是具体的步骤：

首先，在外部JS文件中定义一个函数，例如：

function externalFunction() {
  console.log("这是外部JS文件中定义的函数");
}

然后，在Vue的组件中使用外部JS文件中的函数，例如：

methods: {
  callExternalFunction() {
    externalFunction();
  }
}

在Vue的组件中，可以通过调用externalFunction()来使用外部JS文件中的函数。

3. 在Vue中如何使用外部JS文件中的变量？

类似于使用外部JS文件中的函数，你也可以在Vue的组件中使用外部JS文件中定义的变量。下面是具体的步骤：

首先，在外部JS文件中定义一个变量，例如：

const externalVariable = "这是外部JS文件中定义的变量";

然后，在Vue的组件中使用外部JS文件中的变量，例如：

data() {
  return {
    vueVariable: externalVariable
  };
}

在Vue的组件中，可以通过访问this.vueVariable来使用外部JS文件中的变量。

文章标题：如何在vue里面引入外部Js，发布者：不及物动词，转载请注明出处：https://worktile.com/kb/p/3682190