javascript

VUE引用外部js文件中的函数

场景：老项目没用vue，也不是vue-cli这种开发模式，就是14年那会儿的一个页面，底部一堆js代码。现在我把部分页面改造成了vue模式，但是npm这些工具通通没用，那么要怎么把一些常用函数，比如手机号验证、邮箱验证的函数全部放在util.js文件中，然后在vue的代码块中进行调用？

content组件代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
  <div>
      <button @click='diyfun'>Click</button>
  </div>
</template>
<script>
import {myfun} from '../js/test.js' //注意路径
export default {
  methods:{
      diyfun:function(){
          myfun();
      }
  }
}
</script>

test.js代码：

1
2
3
4
5
6
function myfun() {
     console.log('Success')
}
export { //很关键
    myfun
}

用到了es6的语法。

实际上现在的浏览器是支持ES6模块化语法的，但是直接运行这个代码的话会报错：Uncaught SyntaxError: Cannot use import statement outside a module。

报错的原因是用了es6的语法， 浏览器默认将它作为js解析会出现问题，需要将它作为模块导入，因此，我们需要将<script></script>修改为<script type="module"></script>，修改之后就会出现正确的结果。