vuejs项目打包之后的首屏加载优化及打包之后出现的问题

这篇文章主要介绍了vuejs项目打包之后的首屏加载优化及打包之后可能出现的问题,需要的朋友可以参考下

一:使用CDN资源

我们在打包时,会将package.json里,dependencies对象里插件打包起来,我们可以将其中的一些使用cdn的方式加载,例如不想把vue,axios,vuex,vue-router打包到我们项目中,我们需要这样:

1:打开webpack.base.conf.js

module.exports = {   externals: {    ‘vue‘: ‘Vue‘,    ‘axios‘: ‘axios‘,    ‘vuex‘: ‘Vuex‘,    ‘vue-router‘: ‘VueRouter‘ }}

登录后复制

2:打开router/index.js。注销掉以下两行

立即学习“前端免费学习笔记(深入)”;

//import Vue from ‘vue‘//Vue.use(Router)

登录后复制

3:如果你使用了vuex,把vuex/index.js(命名各有不同)中的Vue.use(Vuex)注销了

Vue.use(Vuex)

打包后可能出现的问题

1:被keep-alive包围的元素无法显示

原因:暂不明。

解决方法:不用keep-alive

推荐阅读:Vue项目使用CDN优化首屏加载问题

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

javascript与PHP动态往类中添加方法对比

vue2 mint-ui loadmore实现下拉刷新,上拉更多功能

JS代码实现电脑配置检测功能

以上就是vuejs项目打包之后的首屏加载优化及打包之后出现的问题的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2755815.html

(0)
上一篇 2025年3月8日 07:20:43
下一篇 2025年3月8日 07:20:51

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • postman+json+springmvc测试批量添加实例

    下面我就为大家分享一篇postman+json+springmvc测试批量添加实例,具有很好的参考价值,希望对大家有所帮助。 postman工具配置和数据准备: 1)在地址栏输入测试IP地址和端口号已经对应的接口地址; 2)在Headers…

    2025年3月8日
    200
  • JS和Canvas实现图片的预览压缩和上传功能

    这篇文章主要介绍了js和canvas实现图片的预览压缩和上传功能,实现此功能大概有两步,第一步用户选择需要上传的图片,第二步获取图片资源压缩预览上传,具体实现代码大家参考下本文 先来一张效果图,压压惊 第一步:用户选择需要上传的图片 登录后…

    2025年3月8日 编程技术
    200
  • 基于js中的存储键值对以及注意事项介绍

    下面我就为大家介绍一下基于js中的存储键值对以及注意事项。希望对大家有所帮助。 前端有时候需要存储键值对,需要主要的一点是键必须为字符串,重要的再次说明,键需要为字符串。 重点内容 nbsp;html> 菜鸟教程(runoob.com…

    编程技术 2025年3月8日
    200
  • js将键值对字符串转为json字符串的方法

    下面我就为大家分享一篇js将键值对字符串转为json字符串的方法,具有很好的参考价值,希望对大家有所帮助。 要转化的键值对字符  var respDesc=“cardid=64157001&cardnum=1&sporder…

    编程技术 2025年3月8日
    200
  • vue.js中created方法作用_vue.js

    这篇文章主要介绍了vue.js中created方法作用及mounted和created的区别介绍,需要的朋友可以参考下 这是它的一个生命周期钩子函数,就是一个vue实例被生成后调用这个函数。一个vue实例被生成后还要绑定到某个html元素上…

    2025年3月8日 编程技术
    200
  • json对象及数组键值的深度大小写转换问题详解

    这篇文章主要给大家介绍了关于json对象及数组键值的深度大小写转换问题的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面一起学习学习吧。 前言 最近在做一个项目,发现后端返回的数据键值全…

    编程技术 2025年3月8日
    200
  • Chart.js 轻量级HTML5图表绘制工具库使用详解

    这次给大家带来Chart.js 轻量级HTML5图表绘制工具库使用详解,Chart.js 轻量级HTML5图表绘制工具库使用的注意事项有哪些,下面就是实战案例,一起来看一下。 步骤: html部分: 登录后复制 javascript部分: …

    2025年3月8日 编程技术
    200
  • Vue.js实现表格增删步奏详解

    这次给大家带来Vue.js实现表格增删步奏详解,Vue.js实现表格增删的注意事项有哪些,下面就是实战案例,一起来看一下。 具体代码如下: Vue.js小demo label{float:left;line-height: 34px;} .…

    2025年3月8日
    200
  • Chart.js轻量级图表库使用步骤详解

    这次给大家带来Chart.js轻量级图表库使用步骤详解,Chart.js轻量级图表库使用的注意事项有哪些,下面就是实战案例,一起来看一下。 前言 最近项目中遇到一个在页面中画图表的需求,需要一个扇状图和一个柱状图,虽然能使用svg或canv…

    2025年3月8日 编程技术
    200
  • VUE2.0中Jsonp使用步奏详解

    这次给大家带来VUE2.0中Jsonp使用步奏详解,VUE2.0中Jsonp使用的注意事项有哪些,下面就是实战案例,一起来看一下。 1.JSONP的用途和原理 使用JSONP主要是目的通过动态创建Script,动态拼接url,进而抓取数据,…

    2025年3月8日 编程技术
    200

发表回复

登录后才能评论