返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue如何引用public中的js文件
  • 123
分享到

Vue如何引用public中的js文件

2024-04-02 19:04:59 123人浏览 泡泡鱼
摘要

目录如何引用public中的js文件Vue引用公共js步骤如何引用public中的js文件 在public文件夹下创建config.js文件。 config.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中,方便调用和维护,避免重复代码

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

--结束END--

本文标题: Vue如何引用public中的js文件

本文链接: https://lsjlt.com/news/168129.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Vue如何引用public中的js文件
    目录如何引用public中的js文件vue引用公共js步骤如何引用public中的js文件 在public文件夹下创建config.js文件。 config.js中可以使用变量,也可...
    99+
    2024-04-02
  • vue引用public的js文件
    vue引用public中js文件的方法:1.首先在项目中创建一个公共(public)的js文件;2.在main.js中使用import命令函数引入公共js并注册;3.通过this方法调用js文件即可。具体操作步骤:创建公共JS(utils....
    99+
    2024-04-02
  • vue项目的html如何引进public里面的js文件
    目录vue html引进public里面的js文件vue引入静态JS文件(爬坑)总结vue html引进public里面的js文件 首先在public文件夹添加js文件夹,再在js文...
    99+
    2022-12-08
    vue项目的html public里的js文件 html引进public的js
  • vue如何引用外部JS并调用JS文件中的方法
    这篇“vue如何引用外部JS并调用JS文件中的方法”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue如何引用外部JS并调用...
    99+
    2023-07-05
  • vue引用public目录下文件的方式详解
    有时候我们在开发h5时候,会有需要绑卡授权操作,这个时候需要同意某些协议并且这些协议是可以点击打开的,这种该怎么做呢?其实这就是一个链接,前端能够打开链接并且常用的也就是a标签喝vu...
    99+
    2022-11-13
    vue public目录 vue的public文件夹 vue引用public的js文件
  • vue项目之index.html如何引入JS文件
    目录vue index.html引入JS文件注意路径的写法index.html引入js文件失效的解决解决办法总结vue index.html引入JS文件 注意路径的写法 <!D...
    99+
    2022-12-08
    vue index.html index.html引入JS文件 vue引入JS文件
  • react中如何引入js文件
    这篇文章给大家分享的是有关react中如何引入js文件的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。   导入jquery-2.1.4.min.js会在MyEclipse中报告...
    99+
    2024-04-02
  • vue打包引用的js文件丢失
    在使用 vue 打包工具时,有时我们会遇到引用的 js 文件丢失的问题。这个问题会导致整个应用程序无法正常运行,给开发人员带来不小的困扰和麻烦。本文将就此问题进行深入分析,并提供一些有效的解决方案,以帮助开发人员快速解决该问题。一、问题原因...
    99+
    2023-05-24
  • vue引用外部JS并调用JS文件中的方法实例
    目录VUE项目中引入JS文件的几种方法1.在index.html页面使用script标签引入2.在main.js中使用window.moduleName 使用3.手动添加export...
    99+
    2023-02-27
    vue引用外部js文件 vuecli引入外部js
  • JSP如何引入JS文件
    这篇文章主要讲解了“JSP如何引入JS文件”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JSP如何引入JS文件”吧!1.在eclipse中新建一个web项目...
    99+
    2024-04-02
  • HTML如何引入js文件
    这篇文章主要为大家展示了“HTML如何引入js文件”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“HTML如何引入js文件”这篇文章吧。 script标签元素既...
    99+
    2024-04-02
  • uniapp如何引入js文件
    随着Uniapp的不断发展壮大,越来越多的开发者开始使用它来开发跨平台应用程序。在开发过程中,有时可能需要引入一些自己编写的js文件。本文将介绍使用Uniapp如何引入js文件的方法。一、在页面中引入js文件在pages目录下找到需要引入j...
    99+
    2023-05-21
  • vue如何引用外部JS
    这篇文章给大家分享的是有关vue如何引用外部JS的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。第一种 如果库是es6写的 就可以用import 引入比如我自己写的http 封装接...
    99+
    2024-04-02
  • VUE项目中引入JS文件的方法总结
    目录1.在index.html页面使用script标签引入2.在main.js中使用window.moduleName 使用3.手动添加export4. 使用import方式,把需要...
    99+
    2024-04-02
  • js和css文件如何引入
    小编给大家分享一下js和css文件如何引入,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧! 外部样式表 当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你...
    99+
    2024-04-02
  • vue在.js文件中引入store和router问题
    目录在.js文件中引入store和router在js文件中使用vue的router和store总结在.js文件中引入store和router 在js文件中使用vue的router和...
    99+
    2023-03-06
    vue引入store vue引入router vue引入store和router
  • vue在.js文件中怎么引入store和router
    本文小编为大家详细介绍“vue在.js文件中怎么引入store和router”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue在.js文件中怎么引入store和router”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习...
    99+
    2023-07-05
  • 如何分离vue文件中css、js代码
    今天小编给大家分享一下如何分离vue文件中css、js代码的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。场景因为早期是iOS...
    99+
    2023-06-29
  • 在vue中如何引入外部的css文件
    目录vue中引入外部css文件1. 全局引入2. 局部引入相对路径3. 局部引入绝对路径css-loader导致vue中样式失效的坑问题描述环境原因方案vue中引入外部css文件 在...
    99+
    2024-04-02
  • 在vue中如何引入外部less文件
    目录vue引入外部less文件vue引入lang=“less“报错的解决vue引入外部less文件 首先vue环境搭建成功 一、安装 less 和less-l...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作