将原生 JavaScript 文件导入 Vue 组件 - Vue Js

Question

我已经使用 Vue Js 创建了前端应用程序。我想将一个原生 javascript 文件集成到 Vue 组件中。

原生js文件包含多个util函数。我想从我的 Vue 组件中调用这些函数。

原生js文件util.js

var helper = function(t) {
                var u = 'product',
                    A = 'version',
                return {
                    buildHelpUrl: function(a, b, c) {
                                   return "http://"
                                 }
               /* Snippets */
             }

我尝试了以下方式将我的原生 js 文件导入到 .vue 文件中

Case 1: import OTHHUrlBuilder from '@/util.js';
Case 2: import * as urlbulider from '@/util.js';

没有任何效果。请帮我正确导入和使用原生js文件中可用的功能。

Answer 1

首先将您需要的所有函数导出到您的 .vue 文件中。

.js 文件示例：

  const funcAdd = (a, b) =>  {
   return (a + b)
  }

  const funcSub = (a, b) =>  {
    return (a - b)
  }

  export { funcAdd , funcSub }

然后在您的 .vue 文件中，您可以导入所有导出的函数。

在您的 .vue 文件上：

  <script>

  import { funcAdd , funcSub } from '@/util.js'

 ...

如果你只有一个function函数，可以使用export default

在您的 .js 文件中

const helper = (t) => {
          var u = 'product',
                    A = 'version',
                return {
                    buildHelpUrl: function(a, b, c) {
                                   return "http://"
                                 }
               /* Snippets */
             }

    export default helper

在你的 .vue 文件上

    import helper from '@/util.js'