我的编程空间,编程开发者的网络收藏夹
学习永远不晚

Vue如何引用public中的js文件

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

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

class="lazy" data-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中,方便调用和维护,避免重复代码

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

Vue如何引用public中的js文件

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

vue项目的html如何引进public里面的js文件

这篇文章主要介绍了vue项目的html如何引进public里面的js文件,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
2022-12-08

vue如何引用外部JS并调用JS文件中的方法

这篇“vue如何引用外部JS并调用JS文件中的方法”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue如何引用外部JS并调用
2023-07-05

vue引用public目录下文件的方式详解

由于一些演示需要对一些简单页面进行配置,由于打包build后的vue项目基本已经看不出原样,因此需要创建一个文件,并在打包的时候不会进行编译,所以文件放在public,下面这篇文章主要给大家介绍了关于vue引用public目录下文件的相关资料,需要的朋友可以参考下
2022-11-13

vue项目之index.html如何引入JS文件

这篇文章主要介绍了vue项目之index.html如何引入JS文件问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
2022-12-08

vue打包引用的js文件丢失

在使用 vue 打包工具时,有时我们会遇到引用的 js 文件丢失的问题。这个问题会导致整个应用程序无法正常运行,给开发人员带来不小的困扰和麻烦。本文将就此问题进行深入分析,并提供一些有效的解决方案,以帮助开发人员快速解决该问题。一、问题原因在 vue 打包工具中,我们使用 import 或 require 引入的外部 js 文件通常会被自动打包到应用程序的 vendor.js
2023-05-24

vue引用外部JS并调用JS文件中的方法实例

我们在做vue项目时,经常会需要引入js,下面这篇文章主要给大家介绍了关于vue引用外部JS并调用JS文件中的方法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-02-27

uniapp如何引入js文件

随着Uniapp的不断发展壮大,越来越多的开发者开始使用它来开发跨平台应用程序。在开发过程中,有时可能需要引入一些自己编写的js文件。本文将介绍使用Uniapp如何引入js文件的方法。一、在页面中引入js文件1. 在pages目录下找到需要引入js文件的页面(例如:index.vue)2. 在该页面的script标签中,使用如下代码引入js文件:```import xxx fr
2023-05-21

vue在.js文件中引入store和router问题

这篇文章主要介绍了vue在.js文件中引入store和router问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
2023-03-06

vue在.js文件中怎么引入store和router

本文小编为大家详细介绍“vue在.js文件中怎么引入store和router”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue在.js文件中怎么引入store和router”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习
2023-07-05

如何分离vue文件中css、js代码

今天小编给大家分享一下如何分离vue文件中css、js代码的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。场景1、因为早期是i
2023-06-29

编程热搜

目录