Vue远程引入js

原创 已于 2022-03-04 15:52:12 修改 · 2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #vue.js

于 2022-03-04 15:51:52 首次发布
本文档介绍了如何在Vue项目中引入并配置外部jQuery库。首先，在index.html文件中通过script标签引入jQuery。对于由vue-cli创建的项目，由于默认的webpack配置已经包含了externals字段，因此需要手动创建vue.config.js文件，并在其中添加externals配置，将jquery映射为'jQuery'。配置完成后，即可在项目中正常使用jQuery。

文档参考地址
在这里插入图片描述

一、找到index.html

配置src

<script
  src="https://code.jquery.com/jquery-3.1.0.js"
></script>

二、配置config

有的vue项目是有webpack.config.js这个配置文件

module.exports = {
  //...
  externals: {
    jquery: 'jQuery',
  },
};

vue-cli创建的已经将webpack.config.js配置好了
所以需要手动创建vue.config.js 进行配置

module.exports = {
    externals: {
        jquery: 'jQuery',
    }
}

配置完毕就可以使用需要的js

vue页面引入局部js方法也叫引入局部公共方法，详细教程使用
jieweiwujie的博客
09-01 1812
vue页面引入局部js方法也叫引入局部公共方法，详细教程使用
Vue如何引入远程JS文件
11-27
问题 最近在使用 Vue 做东西，用到钉钉扫描登录的功能，这里需要引入远程的 js 文件，因为 Vue 的方式跟之前的不太一样，又不想把文件下载到本地应用，找了一下解决的方法，貌似都需要引入第三方的库，最后找到了解决方案，分享之。 思路 一开始的思路是在 Vue 加载完 Dom 之后（mounted），使用 JavaScript 脚本在 body 中插入远程的脚本文件。 后来发现了 Vue 的 createElement 方法，简单的封装一个组件解决问题。 解决方法 第一版代码（直接在操作 Dom ）如下： export default { mounted() { const s =
vue引入远程js
zhl999999999的博客
09-19 2284
1.直接在操作 Dom ： export default {   mounted() {     const s = document.createElement('script');     s.type = 'text/javascript';     s.src = 'https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js';   ...
Vue引入远程JS文件
Terry - 专注外贸B2C
08-06 4245
Vue引入远程JS文件:http://blog.csdn.net/sinat_17775997/article/details/55798611
Vue组件中如何引入远程JS文件
最新发布
08-11
其次，Vue本身不提供直接从远程引入JavaScript文件的官方方法，但可以通过以下几种方式来实现： 1. 使用动态`<script>`标签加载：可以在Vue组件的生命周期钩子中动态创建`<script>`标签，并将其添加到`document`中...
Vue中通过<script></script>引入的Vue.js文件
04-28
<script src="./js/vue%20(1).js" type="text/javascript" charset="UTF-8"> src里面的内容根据自己的下载的Vue.js的文件位置决定的，我这里只是拿我自己做的举个例子。这个地方的vue.js是因为我下载了两次这个版本...
加载 vue 远程代码的组件实例详解
08-28
本文将围绕 Vue 项目中加载远程代码的组件实例进行详细的讲解，涵盖了加载远端代码、注册加载后的代码到框架中、父组件如何和远端引入的组件通信、远端代码如何复用框架中已引入的库等方面。 加载远端代码 在 Vue ...
（JAVA）02——面向对象编程（上）
Lemon_CHA的博客
11-07 655
面向对象编程（OOP） OOP——Object Oriented Programming OOA——Object Oriented Analysis OOD——Object Oriented Design 一、寻找（需求分析）：实体 从生活中找到一个具体的对象，该对象有什么样的属性，以及该对象有什么功能。 ———————————————————————————————————————— 二、语法规则： 将具体的对象构建成一个类，比如根据X员工可以创建成一个员工类，类中有员工共有的属性，功能等。 创建
vue 远程加载js
qq_35562291的博客
07-18 1021
其实vue加载远程js的教程很多，但是我比较笨呐。。。用不出来，每次都报方法/属性不存在的错误，来看一下典型的写法： const s = document.createElement('script'); s.type = 'text/javascript'; s.src = '<js地址>'; document.body.appendChild(s); 如: Vue...
vue中引入远程的js文件
杨梦飞
03-07 1684
vue js components: { //引入外链中的js 'remote-js': { render(createElement) { return createElement('script', { attrs: { type: 'text/javascript', ...
vue如何引用远程js
xpursue的博客
09-27 2070
在html页面引用js只需<script type="text/javascript" src="http://...(url)"></script> vue写法： 通过第三方url地址动态加载远程js let reScript = document.createElement("script"); reScript.setAttribute( ...
Vue 模块引入远程Js
leg的博客
01-23 1万+
需求 要在vue的一个模块中引入远程的js，并在js加载完成之后处理一些逻辑 参考 各种搜索之后发现并没有我想要的那种解决方案，然后找了几个博客资料。感谢博主们的分享 http://blog.csdn.net/sinat_17775997/article/details/55798611 最相似的一篇博客 render函数两篇博客 http://blog.csdn.net/baid
vue 引入原生js_vue引用js文件的多种方式(推荐)
weixin_39962394的博客
12-19 4273
1、vue-cli webpack全局引入jquery(1) 首先 npm install jquery --save (--save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。)(2)在webpack.base.conf.js里加入var webpack = require("webpack")(3)在module.exports的最后加入pl...
Vue组件中如何引入外部的js文件
热门推荐
前端队长Daotin
03-29 2万+
背景在Vue中，通常我们引入一个js插件都是使用npm方式下载然后import使用的。但是我现在本地有了js文件或者是一个远程js文件链接，我不想使用npm install xxx的方...
VUE项目远程引入js插件
忽胖忽瘦的博客
12-02 880
本文使用的是vue-cli 4.x 第一步: 被引入的js应该是通过export default / export 输出的。 第二步: 在index.html中通过‘script标签 ’引入远程文件。 第三步: 修改vue.config.js module.exports={ configureWebpack:{ plugins: [ ... ...
vue3怎么引入远程js文件
03-12
好的，用户的问题是关于如何在Vue 3项目中引入远程JS文件的最佳实践。我需要先回顾一下Vue 3的相关知识，以及之前用户提供的引用内容，这些引用都是关于Vue 2的方法，但Vue 3有些不同，特别是Composition API和生命...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

国家级著名CV工程师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值