资讯专栏INFORMATION COLUMN

vue项目中获取外部js,并使用其中方法

vslam / 868人阅读

摘要:因为项目需要,需要从外部获取,然后在项目中使用其中的方法。这个功能主要是用在创建一个库的时候用的,但是也可以在我们项目开发中充分使用。比如这里就直接使用了刚刚引入的外部中的方法初始化引入的

因为项目需要,需要从外部获取js,然后在vus项目中使用其中的方法。

如果我们想引用一个库,但是又不想让webpack打包,并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用,那就可以通过配置externals。这个功能主要是用在创建一个库的时候用的,但是也可以在我们项目开发中充分使用。

在webpack中配置externals

我自己使用的代码如下:


第一步:在最外部的index.html文件中,在


第二步:利用了webpack中的externals特性,可以加载非打包文件的代码,具体使用方法是,在build文件夹中的webpack.base.conf.js文件中,添加externals,其中的第一个WA是定义的名称,方便之后在其他的vue组件中引用,第二个WA是指引入js文件的输出名称。

module.exports = {
context: path.resolve(__dirname, "../"),
entry: {

  app: "./src/main.js"

},
// 核心是下面的代码:即通过externals引入非打包js文件
externals: {

  "WA":"WA",

},
....// 下面省略


第三步:在具体页面中引用WA。比如我在我的mission.vue中,可以这样写:

import WA from "WA"

这样就可以在文件中引用相关方法了。比如这里就直接使用了刚刚引入的外部js中的init()方法:

  created() {
      // 初始化引入的js
      WA.init({ ui: false })
  },

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/53391.html

相关文章

  • vue项目获取外部js使用方法

    摘要:因为项目需要,需要从外部获取,然后在项目中使用其中的方法。这个功能主要是用在创建一个库的时候用的,但是也可以在我们项目开发中充分使用。比如这里就直接使用了刚刚引入的外部中的方法初始化引入的 因为项目需要,需要从外部获取js,然后在vus项目中使用其中的方法。 如果我们想引用一个库,但是又不想让webpack打包,并且又不影响我们在程序中以CMD、AMD或者window/global全局...

    LancerComet 评论0 收藏0
  • Vuex的基本入门、使用场景及安装配置

    摘要:基本概念现在回到我们的中创建且声明一个对象张三李四王五这里不同于文档中的写法,我这里直接将创建声明简写成一段代码个人更偏好这样写。 什么是Vuex? 用2句话概括: 主要应用于Vue.js中管理数据状态的一个库 通过创建一个集中的数据存储,供程序中所有组件访问 showImg(https://segmentfault.com/img/bVbfOQe?w=1331&h=287);当然...

    shuibo 评论0 收藏0
  • vue练习小项目

    项目参考了notepad,非常感谢。用flex布局页面,响应式,简化了内容,当做练手vue项目 项目开发过程中,遇到的问题及知识点全部记录在下方 vue2 + vuex + flex + localStorage 本地记事本 项目使用了vue cli 脚手架,webpack-simple模板,fontawesome图标 在线预览及本地安装 notebook github点击预览 npm insta...

    lbool 评论0 收藏0
  • 美团小程序框架mpvue入门教程

    摘要:美团小程序框架入门教程自打写了美团小程序框架蹲坑指南一发不可收拾,今天趁周末空闲,来写个没朋友的简单入门教程,本教程只针对新手,老鸟勿喷。 美团小程序框架mpvue入门教程 自打写了 美团小程序框架mpvue蹲坑指南,一发不可收拾,今天趁周末空闲,来写个mpvue(没朋友)的简单入门教程,本教程只针对新手,老鸟勿喷。 另外,我还专门为本文做了一个简单的项目,如果懒得从头开始搭项目的童鞋...

    YorkChen 评论0 收藏0
  • 微信小程序开发的二三事之网易云信IMSDK DEMO

    摘要:传统的网页编程采用的三剑客来实现,在微信小程序中同样有三剑客。观察者模式不难实现,重点是如何在微信小程序中搭配其特有的生命周期来使用。交互事件传统的事件传递类型有冒泡型与捕获型,微信小程序中自然也有。 本文由作者邹永胜授权网易云社区发布。 简介为了更好的展示我们即时通讯SDK强悍的能力,网易云信IM SDK微信小程序DEMO的开发就提上了日程。用产品的话说就是: 云信 IM 小程序 S...

    weij 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<