解决vue生产环境app.js或vendor文件过大问题

1.去掉多余的库将不必要的库卸载掉 npm uninstall xxx 举个例子:例如moment库文件是很大的,在前端可以用js的 new Date实现获取日期,或者可以其他库代替,也可以将moment库放在服务端用,将所有关于时间的处理放到服务端进行. 2.路由懒加载将下图中的1改为2,详细可以百度搜索 vue路由懒加载 3.开启服务端gzip压缩我这里用的是nginx,所以下找到nginx配置文件: vi /etc/nginx/nginx.conf 跟着下图一样开放nginx的gzi…

vue+webpack+element-ui项目打包优化速度与app.js、vendor.js打包后文件过大

从开通博客到现在也没写什么东西,最近几天一直在研究vue+webpack+element-ui项目打包速度优化,想把这几天的成果记录下来,可能对前端牛人来说我这技术比较菜,但还是希望给有需要的朋友提供一下方便. 一开始项目部署到线上后第一次访问首页的时间是7.8秒的样子,页面加载太慢了自己都接受不了何况用户. 主要是从一下几步来优化的: 1.vue路由的加载方式 import Home from '@/components/Index' 改为 const Index = resolve => r…

Vue生产环境调试的方法

vue 生产环境默认是无法启用vue devtools的,如果生产应用出了问题,就很难解决.. 原理先说下vue如何判断devtools是否可用的. vue devtools扩展组件会在window全局注入__VUE_DEVTOOLS_GLOBAL_HOOK__变量,Vue就是根据这个变量判断是否需要调试的. vue根实例初始化之前判断Vue.config.devtools是否为true.若为true, 则调用window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit('…

Vue生产环境部署

前面的话开发时,Vue 会提供很多警告来帮助解决常见的错误与陷阱.生产时,这些警告语句却没有用,反而会增加载荷量.再次,有些警告检查有小的运行时开销,生产环境模式下是可以避免的.本文将详细介绍Vue生产环境部署生产环境如果用 Vue 完整独立版本 (直接用 <script> 元素引入 Vue),生产时应该用精简版本 (vue.min.js) 如果用 Webpack 或 Browserify 类似的打包工具时,生产状态会在 Vue 源码中由 process.env.NODE_ENV 决定,…

Vue 生产环境部署

简要:继上次搭建vue环境后,开始着手vue的学习;为此向大家分享从开发环境部署到生产环境(线上)中遇到的问题和解决办法,希望能够跟各位VUE大神学习探索,如果有不对或者好的建议告知下:*~*! 一.如何打包,部署到生产环境(线上) npm run build 1. dist 文件结构(编译后,生成在vue目录下) - static (存放css/js/image)- index.html (编译后页面) 2. 部署生产环境(以Thinkphp为例) (1) 建立子项目,创建控制器建立index…

Vue 生产环境（production) 打开调试工具的方法

总所周知,在production生产环境下,点击vue插件会显示, 并且按F12是没办法使用调试工具的,这样非常不方便其实是有一个办法的,那就是复制下面的js,然后在控制台执行代码中已经写清楚执行步骤了 function openVueTool(){ //在方法中执行,避免污染全局变量 //开启vue2 production调试的方法 //1.找vue实例,可以说99%的应用是用的app.__vue__ //如果实在找不到,那么就到找到任意组件,用组件元素.__vue__.$root来获取…

vue生产环境清除console.log

npm run build 后的生产环境的代码,会有很多开发时留下的console.log(),不可能每个页面不停地删除在build/webpack.prod.conf.js文件里加上这样一段代码即可 new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, drop_debugger: true, //++ drop_console: true//++}, sourceMap: config.build.produc…

VUE生产环境打包build

1.进入到项目根目录执行 npm run build 此时会自动打包在dist目录下 2.安装服务 npm install -g serve 3.启动 serve dist 总结: 以上就是生产环境打包的过程. npm run dev是开发环境, npm run build是生产环境…

vue 生产环境 background 背景图不显示原因

通常我们使用img标签引入文件,npm run build 打包后 ,因为img为html标签,打包后他的路径是由index.html开始访问的,他走static/img/'图片名'是能正确访问到图片的而我们写在css background:url(../xxx/)引入的图片 ,这时打包后他的路径是从static/img/’图片名’是访问错误的,因为在css目录下并没有static目录.所以此时需要先回退两层到根节点处才可以正确获取到图片. 打开build/utils.js publicPat…

vue生产环境部署总结

参考:http://www.cnblogs.com/vipstone/p/6910255.html 1. vue项目根目录/config/index.js更改资源生成路径 assetsPublicPath:"/项目名/"改为assetsPublicPath:"/" 2. 使用 npm run build 命令生成站点,站点为根目录下的dist文件: 3. 如果去掉了url中的“#”,记得要配置服务器端…

解决vue中使用laydate.js选择日期后再修改其他model时日期会被清空问题

首先描述一下问题,下图中均绑定v-model,例如先选择出生开始时间,然后当再选择地区或其他选项时该时间就会被清空首先看一下我这边开始的默认值,开始我设置都为空当我选择如下图的生日开始时间与结束时间后重新打印得到的结果如下发现虽然选择了时间,demo中也显示了日期,但是打印出来的实际的值确是空的,所以得主这个的主要原因是laydate选好日期后并没有赋值到model中,当修改其他model时该model为空,所以被重新赋值了解决方法解决它的方法是在laydate的done回调中直接给…

vue 生产环境和测试环境的配置

我们引用的是axios 给src目录增加 api 文件夹里面写上index.js // 配置API接口地址 var root = process.env.API_ROOT // 引用axios var axios = require('axios') // 自定义判断元素类型JS function toType (obj) { return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase() } // 参数过滤函数 f…

vue.js学习之打包为生产环境后，页面为白色

vue.js学习之打包为生产环境后,页面为白色一:配置问题当我们将项目打包为生产环境后,在dist文件夹下打开index.html,会发现页面为白色. 1:打开config>index.js 2:在build对象找到assetsPublicPath,值改为‘./’ 二:页面高度问题在低版本的ios手机上,页面也是白屏,这个时候应该是html,body都没有设置高度,我们在页面加上如下代码就行: html, body { width: 100%; height: 100%; margin:…

webpack开发与生产环境配置

前言作者去年就开始使用webpack, 最早的接触就来自于vue-cli.那个时候工作重点主要也是 vue 的使用,对webpack的配置是知之甚少,期间有问题也是询问大牛 @吕大豹.顺便说一句,对于前端知识体系迷茫的童鞋可以关注豹哥的微信公众号,<大豹杂说>.豹哥对于刚开始小白的自己(虽然现在也白)知无不谈,而且回复超快超认真.这里真的很感谢豹哥.前段时间工作不忙,自己就啃了啃webpack的官方文档,毕竟知识还是在自己脑袋里踏实.然后根据vue-cli的配置文件丰富了一点新的东西,发布出…

面试官：自己搭建过vue开发环境吗？

开篇前段时间,看到群里一些小伙伴面试的时候被面试官问到这类题目.平时大家开发vue项目的时候,相信大部分人都是使用 vue-cli脚手架生成的项目架构,然后 npm run install 安装依赖,npm run serve启动项目然后就开始写业务代码了. 但是对项目里的webpack封装和配置了解的不清楚,容易导致出问题不知如何解决,或者不会通过webpack去扩展新功能. 该篇文章主要是想告诉小伙伴们,如何一步一步的通过 webpack4来搭建自己的vue开发环境首先我们要知道 vue…

ionic框架前端生产环境的简单部署

1. 效果对比 1.1 开发环境 css+js+lib文件大小为好多M :) 1.2 部署环境(生产环境) css+js+lib文件大小约为800K 文件大小:好多M–>800K(多少自己试下),文件数目:N多–>4个 2. gulp实现打开项目下的gulpfile.js文件 var gulp = require('gulp'); // 引入gulp组件(插件) var uglify = require('gulp-uglify'); var rename = require('gulp-r…

生产环境使用Nginx+uwsgi部署Django

在本地运行django应用相对来说还是挺方便的,使用自带的runserver启动即可.如果在生产环境部署django,就要多考虑一些问题了.比如静态文件处理,安全,效率等等在网上找到了不错的部署的教程,讲解的还是很详细的,我就不重新再整理了. 五步教你实现使用Nginx+uWSGI+Django方法部署Django程序(上) – Django中国社区五步教你实现使用Nginx+uWSGI+Django方法部署Django程序(下) – Django中国社区但是作为记录,我还是要记录下部署中遇…

ubuntu搭建nodejs生产环境——快速部署手册

为什么不用CentOS而用Ubuntu作为生产环境的运行平台?这个我也比较好奇,公司订的只能沿用传统,从使用成本的角度来说,此举也是值得肯定的. 测试环境腾讯云 Ubuntu 16.04 阿里云 Ubuntu 16.04 开启Root账号ssh登录 1.修改配置文件使用命令:sudo vi /etc/ssh/sshd_config打开文件,找到配置: PermitRootLogin prohibit-password 修改成: PermitRootLogin yes 2.重启ssh sudo…

深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三)