vuecli3 external的一个注意事项

最新推荐文章于 2024-01-30 10:17:41 发布
最新推荐文章于 2024-01-30 10:17:41 发布
阅读量1.2k 收藏
点赞数
分类专栏： 前端 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cpa0701/article/details/108522931
版权

之间有写过一篇external和import,package.json的关系
项目中有一个tui-editor的依赖，然后目前external是这样配置的
在这里插入图片描述
把jquery给排除了

坑来了！！！！

由于tui-editor中依赖了jquery，那么在打包时便会导致部分代码不生效，关键是tui-editor运行时也不报错，一直以为是babel的问题。。。。。
之后将jquery不加入externals中，恢复正常
总结：
如果项目中有第三方依赖用到了externals中的依赖，那么最好还是不要将其排除

AwesomeCPA
关注
专栏目录
vue3.0 webpack采用externals进行cdn优化
weixin_46605745的博客
02-23 1201
第一步 在vue.config.js文件内的configureWebpack方法内写入externals configureWebpack: { // provide the app's title in webpack's name field, so that // it can be accessed in index.html to inject the correct title. name: name, resolve: { alias: {
前端性能优化《一》：vue-cli3中使用external进行cdn配置
sixam的博客
05-11 9415
不过使用externals属性要注意的是，虽然可以优化首屏加载速度，但是由于静态资源分离，也会增加http请求数量。所以如果是小项目，最好就不要用externals属性，因为小项目打包的出来的vender.js体积不大，建议项目体量较大的项目再用比较合适。
vue3使用 vue-grid-layout报错：external_commonjs_vue_commonjs2_vue_root_Vue_default.a is not a constructor
ping
11-10 4109
提示： 解决： 第一步： npm add vue-grid-layout@3.0.0-beta1 第二步： mian.js里引入： import VueGridLayout from ‘vue-grid-layout’ 加入：.use(VueGridLayout) createApp(App).use(axios).use(router).use(VueGridLayout).mount('#app') 因为vue-grid-layout是vue2版本的 但自己用的是vu...
vue-cli3配置externals、jquery
solocao的专栏
09-05 2048
在index.html引入 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script> 配置文件 vue.config.js 代码如下： module.exports = { configureWebpack:{ externals: { 'jquery' : '$', } }, };
Vue Cli3 项目 vue.config.js 配置
qq_38870034的博客
09-18 1409
Vue Cli3 项目 vue.config.js 配置 配置优化 • 一、js文件最小化处理 • 二、分割代码 • 三、图片资源压缩 • 四、开启gzip压缩 • 五、优化scss配置文件的引入 • 六、公用代码提取，使用cdn加载 • 七、去除console.log 通过vue-cli3脚手架创建的项目，可以通过在项目根目录下创建vue.config.js配置文件来修改优化webpack配置，主要优化流程分为以下几步进行，用于优化项目打包，减小体积大小 一、js文件最小化处理 代码的最优化, 通过cha
【Vue CLI4】打包优化，通过externals配合cdn资源优化依赖项体积
xzxlemontea的博客
09-30 2813
打包优化前的体积： 打包优化后的体积： 一、项目根目录创建vue.config.js，通过chainWebpack配置打包入口，这样我们就可以针对发布和开发两种模式使用不同的打包入口，具体代码如下： module.exports = { chainWebpack: config => { // 发布模式 config.when(process.env.NODE_ENV === 'pr...
VueCli中自定义配置webpack
weixin_46972979的博客
05-10 1383
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
Vue cli 引入第三方JS和CSS的常用方法分享
01-19
第一种方法： 直接在index.html中引入 js [removed][removed] css <link rel=stylesheet href=static/mui.min.css rel=external nofollow /> 第二种 在单页面中用import方法导入 js import mui from '../...
vue-cli3打包项目引入外部CDN资源文件
litty_123的博客
02-20 1655
1.在vue.config.js中使用chainWebpack添加externals配置 module.exports = { chainWebpack: config => { if (process.env.NODE_ENV === 'production') { // #region 忽略生成环境打包的文件 var externals = { 'vue': 'Vue',
Vue 打包优化之 externals 抽离公共的第三方库
天问博客-专注于大前端技术
11-29 3496
使用 @vue/cli 脚手架构建的 Vue 全家桶项目，默认配置下，打包后会把 vue、vue-router、axios、vuex、element-ui、echarts 等公共库打包在一起，导致基础 chunk、vendor 包体积特别大，有时一个文件能达到 3-5MB，这会大大影响首次加载速度。因此需要抽离第三方公共库，配合使用 CDN 加速。
Vue3,VueX,VueRouter的配置学习
最新发布
qq_58462591的博客
01-30 1452
在文件中写​​routes:[},},})​需要注意的是history:createWebHistory(),是路由的工作模式，还有种hash模式但是hash模式会让url带#，我们一般都采用history的模式，但是需要后端后面去处理404等问题。然后是更改main.js更改main.js如下​//引入路由器//创建应用//使用路由器再去App.vue里面引用<template><div>-- 导航 -->
vue项目打包，使用externals抽离公共的第三方库
Hhjian524的博客
10-13 956
vue项目打包，配置externals
Numpy模块常用方法汇总
m0_52839423的博客
12-30 979
Numpy 模块常用方法汇总 文章目录Numpy 模块常用方法汇总随机数数组基本随机数random.rand(d0, d1, ..., dn)random.random_sample(size)random.randint(low, high = None, size = None)random.random_integers(low, high = None, size = None)常用的分布随机数random.randn(d0, d1, ..., dn)random.normal(loc = 0.0,
python使用numpy的np.mod函数计算numpy数组除以某一特定数值剩余的余数（remainder）、np.mod函数和np.fmod函数对负值的处理方式有差异
data+scenario+science+insight
01-31 1600
python使用numpy的np.mod函数计算numpy数组除以某一特定数值剩余的余数（remainder）、np.mod函数和np.fmod函数对负值的处理方式有差异
numpy的下载与安装教程——（解决No module named numpy问题）
热门推荐
YBUIIPL的博客
03-08 8万+
NumPy函数库是Python开发环境的一个独立模块，而且大多数Python发行版没有默认安装NumPy数据库，因此在安装Python之后必须单独安装NumPy数据库。 进入Python shell开发环境后输入 from numpy import* 如果出现No module named numpy问题则需要安装numpy数据库。 1.下载NumPy数据库 下载地址：http://ww
numpy.mod详解
wzy628810的博客
01-07 1万+
numpy.mod 用例: numpy.mod(x1, x2, /, out=None, *, where=True, casting=‘same_kind’, order=‘K’, dtype=None, subok=True[, signature, extobj]) = <ufunc ‘remainder’> 功能: 计算两数组对应位置元素的余数。 当对数组执行地板除fl...
np.mod() 取模运算
qq_42251157的博客
09-23 487
np.mod()
NP管理器 NPManager v3.0.49 安卓APK逆向反编译工具
qq_36742166的博客
09-02 4188
NP管理器 NPManager 安卓反编译工具，NP管理器是一款强大的安卓反编译或反汇编工具，虽然这个NPManager反编译或反汇编工具没有APK逆向修改神器”MT管理器“强大，但是也多了一个选择，NP管理器 NPManager 由吹牛儿原创开发，支持Apk 签名、共存、去除签名校验、对话框取消、去除 VPN/代理检测，常见字符串转换，如 base64、des、md5、16 进制、Unicode、去空白等。工具箱(常见字符串转换，如 base64、des、md5、16 进制、Unicode、去空白等)。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值