vue中在vue.config.js使用externals引入jquery【cdn】

已于 2022-03-13 14:43:49 修改
阅读量2.8k 收藏 4
点赞数
分类专栏： webpack 文章标签： html html5 css
于 2021-09-08 16:12:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37899792/article/details/120182375
版权

第一步index.html中引入jquery

   <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

 第二步vue.config.js配置

  configureWebpack:{
    externals: {
      jquery: "jQuery"
    }
  },

 第三步引入并使用$

import $ from "jquery";

有蝉
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue - vue.config.js中devServer配置方式
10-16
今天小编就为大家分享一篇vue - vue.config.js中devServer配置方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue.config.js 配置
weixin_45000761的博客
04-27 167
module.exports = { // 基本路径 publicPath值为："./" 打出来的包可以部署在任意路径 // publicPath值为："/my-app/" 包要部署在 "/my-app/" 的子路径里 publicPath: './', // 打包输出文件目录（当运行 vue-cli-service build 时生成的生产环境构建文件的目录） outputDir: 'dist', // 指定生成的 打包入口html文件 名称 ind
前端性能优化《一》：vue-cli3中使用external进行cdn配置
sixam的博客
05-11 8847
不过使用externals属性要注意的是，虽然可以优化首屏加载速度，但是由于静态资源分离，也会增加http请求数量。所以如果是小项目，最好就不要用externals属性，因为小项目打包的出来的vender.js体积不大，建议项目体量较大的项目再用比较合适。
减少打包组件vue.config.js——Webpack的externals的使用
liubangbo的专栏
12-11 4467
文章转自：https://www.cnblogs.com/xbzhu/p/11815197.html 减少打包组件vue.config.js——Webpack的externals的使用 vue.config.js module.exports = { configureWebpack:{ externals: { vue: 'Vue', 'vue-router':'VueRouter', axios: 'axios'
VUE 通过EXTERNALS 加载外部CDN资源，减少打包体积
weixin_51225684的博客
09-13 1752
使用externals 代码 在vue.config.js里面 设置打包排除项使用此配置项 config.plugin('html').tap(args => { isProd args[0].isProd = true return args }) 做 数据的真假，对public/index.html的 cdn外链 开发模式和发布模式的 引入和隐藏。
网络资源网址（自用，不间断更新）！！
qq_35769746的博客
07-06 5320
1.百问网的资料：HTTP：//www.100ask.org/a/download/tools/ 理由：韦东山的Linux的全程学习资料 2.关于PID算法在C51上的实例：HTTPS：//www.cnblogs.com/xiabodan/p/4038629.html 3.博客园博主：HTTPS：//www.cnblogs.com/xiabodan/p/403863...
python笔记：Windows下的 python-ldap 安装
运维呆子 的博客
10-29 1820
Windows下的 python-ldap 安装 https://www.lfd.uci.edu/~gohlke/pythonlibs/#python-ldap 下载： python_ldap-3.3.1-cp39-cp39-win_amd64.whl 这个需要注意，需要安装指定版本，cp39代表是python3.9的版本，我安装的就是这个。 下边这个方式安装会无解,各种报错无法解决： python-ldap ldap支持下载： https://www.python-ldap.org/en/python-l
vue项目打包优化及配置vue.config.js文件（实测有用）
weixin_46824709的博客
07-28 1万+
/是否为生产环境//本地环境是否需要使用cdn//cdn链接//cdn模块名称和模块作用域命名（对应window里面挂载的变量名称）externals{'vue''Vue','vuex''Vuex','axios''axios'},//cdn的css链接css[],//cdn的js链接js['https'https'https'https]}//打包配置文件assetsDir'static','./',https。...
对external的理解
weixin_46611729的博客
03-12 910
external在 vue.config.js 文件中的 configureWebpack 对象下面 例子： // 要排除的包名 // key(是要排除的包名）: value(实际上是实际引入的包的全局的变量名) // 因为要排除 element-ui 所以后面要引入 CDN 文件，CDN 文件中有 ELEMENTUI 的全局变量名 // webpack打包的时候会根据 externals 的配置，首先会排除掉定义的包名（这些包不需要打包） // 空出来的位置，会用变量来替换 externals = {
vue中使用jQuery
~~
04-01 5435
安装： cnpm i -S jquery 引入： main.js中全局引入 import $ from 'jquery'; Vue.prototype.$ = $ 使用： 直接this.$即可调用jQuery mounted() { this.$.get( 'http://120.76.197.111:8090/geoserver/keshan/ows?service=WFS&version=1.0.0&request=GetFeature&amp
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
01-21
1.在vue项目根目录下新建vue.config.js（不是在src下面） vue.config.js配置文件： module.exports = { // 基本路径 baseURL已经过时 publicPath: './', // 输出文件目录 outputDir: 'dist', // eslint-loader...
详解如何配置vue-cli3.0的vue.config.js
12-02
本文介绍了如何配置vue-cli3.0的vue.config.js，分享给大家，具体如下： vue-cli 3 英文文档 vue-cli 3 中文文档 webpack 4 plugins webpack-chain TLDR vue-cli 3 与 2 版本有很大区别 vue-cli 3 的 github 仓库由...
vue.config.js完整配置-超详细
05-26
vue.config.js配置 内容概要：vue.config.js完整配置-超详细 适合人群：工作1-3年的前端人员
vue-cli3中vue.config.js配置教程详解
10-16
主要介绍了vue-cli3中vue.config.js配置教程，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue: vue.config.js配置文件
qq_36413371的博客
12-06 302
Vue-cli2.x项目配置 // build目录下有webpack.base.conf.js配置文件，添加下面的字段 externals: { swiper: 'Swiper', AMap: 'AMap', // 引入高德地图对象 }, Vue-cli3.X项目配置 // 在项目根目录下创建 vue.config.js文件 module.exports = { ...
vue.config.js基本配置，包括配置不打包的模块vue,elementui，通过cdn引入，提取css到单独的css文件，css、js添加hash值，修改端口号，配置跨域代理
艾小逗
02-24 2112
vue.config.js基本配置，包括配置不打包的模块vue,elementui，通过cdn引入，提取css到单独的css文件，css、js添加hash值，修改端口号，配置跨域代理 配置文件vue.config.js // 配置通过CDN引入的js/css const cdn = { externals: { 'vue': 'Vue', 'element-ui': 'ELEMENT' }, js: [ 'https://cdn.bootcss.com/vue/2.5.2
vue项目打包时配置externals，忽略打包第三方库（前端性能优化方案）
热门推荐
徐忠炜的博客
08-26 1万+
在vue.config.js里这样写 const isProduction = process.env.VUE_APP_MODE === 'production' const cdn = { // 忽略打包的第三方库 /** * externals 对象属性解析： * '包名' : '在项目中引入的名字' * 以element-ui举例 我再main.js里是以 * import ELEMENT from 'element-ui' * Vue.use(ELEMENT, { si
Vue 配置使用 externals 使用cdn减小打包体积 (前端优化)
leaf的博客
06-15 3624
Vue 配置使用 externals 使用cdn减小打包体积 在 vue.config.js 中 书写配置 // 引入webpack const webpack = require('webpack'); const path = require('path'); const assetsCDN = { // 放置需要使用 cdn 的库 externals:{ vue: 'Vue', 'element-plus': 'ElementPlus'
免费CDN加速 jQuery、Bootstrap、Vue、React 等JS库
代码研究院
08-16 721
BootJS 提供同支持并维护的前端开源项目免费 CDN 服务，致力于为 Bootstrap、jQuery、React、Vue.js 一样优秀的前端开源项目提供稳定、快速的免费 CDN 加速服务。BootJS 所收录的开源项目主要同步于cdnjs开源项目仓库。 jQuery CDN加速地址 jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。 jQuery其
vue 与vue.config.js cdn
最新发布
09-14
Vue.js是一个用于构建用户界面的渐进式JavaScript框架。它通过使用组件化的方式来构建应用程序，使得开发更加模块化和可维护。Vue CLI是Vue.js官方提供的脚手架工具，可以帮助我们快速搭建Vue项目并进行开发、构建和部署。 Vue.config.js是Vue CLI 3.x的配置文件，用于配置Vue项目的构建和开发过程中的各种选项。在Vue.config.js中，我们可以进行各种修改，比如代理设置等。通过修改Vue.config.js，我们可以根据项目需求进行自定义配置，以满足特定的开发和构建需求。 关于CDN（内容分发网络），它是一种用于加速静态资源加载的技术。在Vue项目中，我们可以使用CDN来引入Vue.js及其相关的库和插件，以提高页面加载速度和性能。 具体来说，在Vue项目中使用CDN可以通过以下步骤实现： 1. 在HTML文件的<head>标签中添加相应的CDN链接。 2. 在Vue.config.js中进行相关配置，比如配置externals选项来告诉Vue不要将CDN中已经存在的库打包进最终的构建文件。 通过使用CDN，我们可以从远程服务器加载Vue.js及其相关资源，而不需要将它们打包到我们的项目中。这样可以减少我们的构建文件大小，并加快页面加载速度。 注意：使用CDN需要确保你的项目能够访问到CDN链接，否则将无法正常加载相关资源。另外，使用CDN可能会导致一些限制，比如不能使用本地文件的相对路径等。 总之，通过使用Vue.config.js和CDN，我们可以更灵活地配置Vue项目，并提高页面加载速度和性能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值