vue 引入qunee_Vue页面中js引入的问题

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

下载graph.editor的官方Demogit：https://github.com/samsha/graph.editor.git

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

复制代码

复制代码

在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资料