Vue如何引用public中的js文件

 更新时间:2022年09月22日 08:35:08   作者:asdfsdgfsdgfa  
这篇文章主要介绍了Vue如何引用public中的js文件,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

如何引用public中的js文件

在public文件夹下创建config.js文件。

config.js中可以使用变量,也可以使用window来挂载

 测试:

注意:index.html在引入config.js时,config.js前面一定要加上/ ,否则子路由菜单刷新会报错,提示找不到js文件

vue引用公共js

在.vue文件中,需要调用一些工具方法,所以需要将公共方法放在公共js中,供组件调用。

步骤

1.创建公共js

创建utils.js

src/common/utils.js
export default {

    show:function () {
      console.log("公共方法");
    }
}

2.在main.js引入公共js

// 引用公共js
import utils from './common/utils.js'
Vue.prototype.utils = utils

3.调用公共方法

export default {
  name: 'abc',
  data () {
    return {
    }
  },
  methods:{
    click:function () {
      this.utils.show();
    }
  }
}

控制台输出:

abc

总结:将公共方法放在同一个js中,方便调用和维护,避免重复代码

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue实现鼠标移入移出事件代码实例

    vue实现鼠标移入移出事件代码实例

    这篇文章主要介绍了vue实现鼠标移入移出事件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • vue中key使用的问题示例解析

    vue中key使用的问题示例解析

    这篇文章主要为大家介绍了vue中key使用的问题示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • Vue3使用el-table组件实现分页、多选以及回显功能

    Vue3使用el-table组件实现分页、多选以及回显功能

    这篇文章主要介绍了Vue3使用el-table组件实现分页、多选以及回显功能,文中通过代码示例介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-09-09
  • vuejs实现折叠面板展开收缩动画效果

    vuejs实现折叠面板展开收缩动画效果

    这篇文章主要介绍了vuejs实现折叠面板展开收缩动画效果,文中通过代码给大家分享两种情况介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • vue.js中Vue-router 2.0基础实践教程

    vue.js中Vue-router 2.0基础实践教程

    这篇文章主要给大家介绍了关于vue.js中Vue-router 2.0基础实践的相关资料,其中包括vue-router 2.0的基础用法、动态路由匹配、嵌套路由、编程式路由、命名路由以及命名视图等相关知识,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-05-05
  • vue项目中实现的微信分享功能示例

    vue项目中实现的微信分享功能示例

    这篇文章主要介绍了vue项目中实现的微信分享功能,结合实例形式分析了基于vue.js实现的微信分享功能具体定义与使用方法,需要的朋友可以参考下
    2019-01-01
  • vuex mutations的两种调用方法小结

    vuex mutations的两种调用方法小结

    这篇文章主要介绍了vuex mutations的两种调用方法小结,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • Vue引入腾讯地图全过程(搜索获取定位)

    Vue引入腾讯地图全过程(搜索获取定位)

    最近需要在项目中使用地图显示点位信息,所以引入了腾讯地图,这篇文章主要给大家介绍了关于Vue引入腾讯地图(搜索获取定位)的相关资料,需要的朋友可以参考下
    2023-10-10
  • Vue Cli中的环境变量和模式

    Vue Cli中的环境变量和模式

    这篇文章主要介绍了Vue Cli中的环境变量和模式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vuejs项目打包之后的首屏加载优化及打包之后出现的问题

    vuejs项目打包之后的首屏加载优化及打包之后出现的问题

    这篇文章主要介绍了vuejs项目打包之后的首屏加载优化及打包之后可能出现的问题,需要的朋友可以参考下
    2018-04-04

最新评论