1.将vue vue-router vuex 尽量使用CDN externals: { 'vue':'Vue', 'vue-router':'VueRouter', 'vuex':'Vuex', 'axios':'axios' }, 2.打包优化最好使用赖加载,加载的每个页面体积都要压缩到最下. const goods = () => import(/* webpackChunkName: "goods" */ './../src/page/goods/goods') 3.web…

最近在做vue项目的时候用到了css3渐变属性,本地跑项目没问题,但是打包放到服务器后发现这个属性丢失了.如下图: .join{ position:absolute; left:1rem; bottom:0.6rem; width:40%; height:2.1875rem; display: block; color:#ffffff; margin:auto; border-radius:1.09375rem; text-decoration: none; line-height:2.1875…

打包上线经常会经常遇到路径找不到,页面空白,那么下面我们就解决一下. 第一步.先找到config目录的index.js 改成如上图红框标注所示 第二步.找到build下的utils.js文件 加上如上图红框所示代码 还有一个问题,就是大家再带入ico图标时,打包后不显示,这里推荐你将图标文件放在根目录下的static文件夹里面,然后直接因这个路径就可以了. 更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/1…

这是一个很头疼的问题,webpack极大的简化了前端自动化配置,但是打包速度实在是不如人意.在此之前,本人也尝试过网友的一些方法,但是,很多坑,跳进去就出不来,经过多个项目实践,现总结一下我用到的优化方式: cdn 原理: 上线依赖(通常放在package.json>dependencies)不参与打包构建,全部通过cdn引入 测试结果: 经过几个项目测验,能从40s以上降到 20s以下,至少节省一半打包时间. // index.html <link rel="stylesheet&…

一.路径问题 1.脚手架+webpack打包通过npm run build,但是后台tomcat部署上线的时候,会衍生出一些问题,比如,路径问题(因为在项目中,我们使用了绝对路径,这里必须要使用相对路径,但是打包后还是会报错,说是找不到assets文件夹下的各种资源,包括images,css,js,是因为,在当初在全局引用的时候写在了index.html中,安全起见,可以写在app.vue中): 2.在打包前还要在config文件夹中的index.js中设置一个路径问题,不然也会报错,在js中找…

webpack 与 vue 在使用vue开发时,遇到打包后单个文件太大,因而需要分包,不然加载时间太久.虽然尽可能减少请求次数,但是单个包太大也不是好事 思路 组件按需加载 vue-router 的懒加载 第三方包分离 代码分割时, 组件按需加载 现在ui库大多都是以组件的形式进行处理,因而不用将整个库都导入,只需导入想要的即可 根据对应库的文档进行操作即可,现在每个库都有对应的使用流程,及相关配置,并不是很难 只是在导入css样式时依旧需要全部导入(目前只能如此) vue-router 懒加载…

webpack 与 vue 在使用vue开发时,遇到打包后单个文件太大,因而需要分包,不然加载时间太久.虽然尽可能减少请求次数,但是单个包太大也不是好事 思路 组件按需加载 vue-router 的懒加载 第三方包分离 代码分割时, 组件按需加载 现在ui库大多都是以组件的形式进行处理,因而不用将整个库都导入,只需导入想要的即可 根据对应库的文档进行操作即可,现在每个库都有对应的使用流程,及相关配置,并不是很难 只是在导入css样式时依旧需要全部导入(目前只能如此) vue-router 懒加载…

前言 当用vue-cli 脚手架 打包压缩时,发现打包出来的css 没有被压缩, 所以查阅了些资料,下面用这个方法解决: 1.首先注释掉webpack.prod.conf.js中下面的代码 new OptimizeCSSPlugin({ cssProcessorOptions: config.build.productionSourceMap ? { safe: true, map: { inline: false } } : { safe: true } }), 2.然后在utils.js中添…

前言 本文是自己vue项目实践中的一些总结,针对Vue2及相关技术栈,实践中版本为2.3.3. 开发前须知 vue-cli 在开发前,我们要至少通读一遍vue官方文档和API(看官方文档是最重要的,胜过看五十.一百篇博客),英文阅读能力还行的建议阅读英文文档,中文文档内容会稍落后,还要通读相关的vue-router.axios.vuex等. 一般来说我们都是先利用vue-cli来搭建项目基本架构. vue-cli官方temaplte地址,我们选择webpack版本,建议看看其文档vue-webp…

Node.js简介 Node.js是一个基于Chrome V8引擎的JavaScript运行环境,用来方便快速地搭建易于扩展的网络应用.Node.js使用了一个事件驱动.非阻塞式I/O的模型,使其轻量又高效,非常适合运行在分布式设备的数据密集型的实时应用.Node.js的包管理器npm,是全球最大的开源库生态系统.Node.js的典型应用场景包括: 实时应用:如在线聊天,实时通知推送等等(例如socket.io). 分布式应用:通过高效的并行I/O使用已有的数据. 工具类应用:海量的工具,小到前…