Vue页面中js引入的问题

在项目中，我们需要引入qunee的编辑器 graph.editor-master，在其中发现了一些引入js时需要注意的问题，在此书写，用来翻阅。

下载graph.editor的官方Demo

• github：github.com/samsha/grap…
• git：https://github.com/samsha/graph.editor.git

怀着激动的心情，我打开了demo的index，看明白了相关代码，看了看相关的资源文件后，心想，得，往自己的项目中引吧。以下是index中的资源文件。

<link rel=stylesheet href=libs/bootstrap/css/bootstrap.css>
<link rel=stylesheet href=libs/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css>
<!-- build:css libs/graph.editor/graph.editor.css -->
<link rel="stylesheet" href="src/css/graph.editor.css"/>
<!-- endbuild -->
<link rel="stylesheet" href="styles/main.css">复制代码

<script src="http://demo.qunee.com/lib/qunee-min.js?v=2.6.0.6"></script>

<!-- build:js libs/js.js -->
<script src="libs/jquery.min.js"></script>
<script src="libs/bootstrap/js/bootstrap.min.js"></script>
<script src="libs/layout.border.js"></script>
<script src="libs/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>
<!-- endbuild -->

<!-- build:js libs/graph.editor/graph.editor.js -->
<script src="src/common/i18n.js"></script>
<script src="src/common/CopyPaste.js"></script>
<script src="src/common/DomSupport.js"></script>
<script src="src/common/DragSupport.js"></script>
<script src="src/common/FileSupport.js"></script>
<script src="src/common/JSONSerializer.js"></script>
<script src="src/common/ExportPane.js"></script>
<script src="src/common/Toolbar.js"></script>
<script src="src/common/ToolBox.js"></script>
<script src="src/common/PopupMenu.js"></script>
<script src="src/common/PropertyPane.js"></script>
<script src="src/common/GridBackground.js"></script>
<script src="src/graph.editor.js"></script>
<!-- endbuild -->

<script src="scripts/graphs.js"></script>
<script src="scripts/main.js"></script>复制代码

在Vue中引入外部的资源文件

由于我们的项目是由Vue+Webpack构建起来的，正常的资源文件都是使用cnpm下载，并且在Vue的配置中引用的，偶尔的几个资源文件还都是直接写在index.html里面，像这种大量的，自己封装的且关联性强的js文件，还真的没有引过。下面开始我们的尝试：

由于我们只有一个页面会用到这些资源文件，所以不考虑直接在index.html里面引用，而且在那里引用会导致，页面还没加载出来，资源就已经先被引用，导致编辑器不能被正常初始化。 所以我直接在我的页面中引用。

import '../../../../static/js/qunee/libs/jquery.min.js'
import '../../../../static/js/qunee/libs/bootstrap/js/bootstrap.min.js'
import '../../../../static/js/qunee/libs/layout.border.js'
import '../../../../static/js/qunee/libs/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js'

import '../../../../static/js/qunee/src/common/i18n.js'
import '../../../../static/js/qunee/src/common/CopyPaste.js'
import '../../../../static/js/qunee/src/common/DomSupport.js'
import '../../../../static/js/qunee/src/common/DragSupport.js'
import '../../../../static/js/qunee/src/common/FileSupport.js'
import '../../../../static/js/qunee/src/common/JSONSerializer.js'
import '../../../../static/js/qunee/src/common/ExportPane.js'
import '../../../../static/js/qunee/src/common/Toolbar.js'
import '../../../../static/js/qunee/src/common/ToolBox.js'
import '../../../../static/js/qunee/src/common/PopupMenu.js'
import '../../../../static/js/qunee/src/common/PropertyPane.js'
import '../../../../static/js/qunee/src/common/GridBackground.js'
import '../../../../static/js/qunee/src/graph.editor.js'
import '../../../../static/js/qunee/graphs.js'
import '../../../../static/js/qunee/main.js'export default {
...
}复制代码

在我以为完事大吉的时候，浏览器毫不留情的报了错。

Uncaught ReferenceError: getI18NString is not defined

WTF???这个方法明明有啊，明明在i18n.js里面啊？？为什么取不到呢？

经过多方查证，我终于发现了原因。

原来，我需要在i18n.js中写一个export，相当于导出getI18NString

function getI18NString(key) {
    if(!i18n[lang]){
        return key;
    }
    var result = i18n[lang][key];
    if (result === undefined) {
        return key;
    }
    return result;
}

export {
  getI18NString
};复制代码

然后在每个用到这个方法的js头部书写：

import { getI18NString } from './i18n.js';复制代码

这时候才能正常调用这个getI18NString方法

完美解决。

相关资料

export：MDN资料

import：MDN资料

转载于:https://juejin.im/post/5ae13ae86fb9a07ac76e810c