vue-cli 如何打包上线的方法示例


Posted in Javascript onMay 08, 2018

以vue创建的官方例子为例子,我们在开发环境的时候会 npm run dev ,生成

vue-cli 如何打包上线的方法示例

而想要打包成一份vue-cli 如何打包上线的方法示例很简单, 只需要 npm run build 这个命令

这两种命令的配置文件在config的index.js 一种是build 一种是dev ,而我们想要在本地查看打包后的成果,需要在assetsPublicPath 改变它的路径, 具体为什么,可以看index.html引入的文件路径

vue-cli 如何打包上线的方法示例

vue-cli 如何打包上线的方法示例

之后只需要放在服务器上运行就好了。

*常用技巧

1.如果在config -> index.js 中的 build 代码中的 productionSourceMap的值设为false ,打包后文件体积可以减少百分之八十

2.如果设置build文件夹下的webpack.prod.conf.js中HtmlWebpackPlugin插件配置参数添加hash: true,即会使打包生成的index.html中的js和css路径带有?+随机字符串,也就是版本控制

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(7)
Dec 23 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
Feb 14 Javascript
express的中间件basicAuth详解
Dec 04 Javascript
深入解读JavaScript中的Hoisting机制
Aug 12 Javascript
jquery网页日历显示控件calendar3.1使用详解
Nov 24 Javascript
bootstarp modal框居中显示的实现代码
Feb 18 Javascript
jquery实现左右轮播图效果
Sep 28 jQuery
JS字符串去除连续或全部重复字符的实例
Mar 08 Javascript
vue单页开发父子组件传值思路详解
May 18 Javascript
vue中使用vee-validator完成表单校验方案
Nov 01 Javascript
vue 实现强制类型转换 数字类型转为字符串
Nov 07 Javascript
详解JavaScript 高阶函数
Sep 14 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
May 08 #Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
May 08 #Javascript
angularjs实现的购物金额计算工具示例
May 08 #Javascript
Vue微信项目按需授权登录策略实践思路详解
May 07 #Javascript
Vue + better-scroll 实现移动端字母索引导航功能
May 07 #Javascript
node使用promise替代回调函数
May 07 #Javascript
node 使用 async 控制并发的方法
May 07 #Javascript
You might like
php循环检测目录是否存在并创建(循环创建目录)
2011/01/06 PHP
PHP魔术引号所带来的安全问题分析
2014/07/15 PHP
php实现的IMEI限制的短信验证码发送类
2015/05/05 PHP
php中动态变量用法实例
2015/06/10 PHP
javascript 一个函数对同一元素的多个事件响应
2009/07/25 Javascript
jquery remove方法应用详解
2012/11/22 Javascript
jQuery.extend()的实现方式详解及实例
2013/06/29 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
JavaScript数据结构和算法之图和图算法
2015/02/11 Javascript
js判断所有表单项不为空则提交表单的实现方法
2016/09/09 Javascript
hovertree插件实现二级树形菜单(简单实用)
2016/12/28 Javascript
jquery仿微信聊天界面
2017/05/06 jQuery
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
linux 后台运行node服务指令方法
2018/05/23 Javascript
微信小程序使用wxParse解析html的方法教程
2018/07/06 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
2019/04/11 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
原生JS实现萤火虫效果
2020/03/07 Javascript
小程序自动化测试的示例代码
2020/08/11 Javascript
ES6学习教程之Promise用法详解
2020/11/22 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
Python实现从URL地址提取文件名的方法
2015/05/15 Python
Python2和Python3.6环境解决共存问题
2018/11/09 Python
详解pandas.DataFrame中删除包涵特定字符串所在的行
2019/04/04 Python
python下PyGame的下载与安装过程及遇到问题
2019/08/04 Python
python中删除某个元素的方法解析
2019/11/05 Python
Python tcp传输代码实例解析
2020/03/18 Python
python实现PDF中表格转化为Excel的方法
2020/06/16 Python
html2canvas生成清晰的图片实现打印的示例代码
2019/09/30 HTML / CSS
Fnac西班牙官网:法国文化和电子产品零售商
2021/03/14 全球购物
打架检讨书100字
2014/01/08 职场文书
室内拓展活动方案
2014/02/13 职场文书
大型会议策划方案
2014/05/17 职场文书
法院个人总结
2015/03/03 职场文书
送给小学生的暑假礼物!小学生必背99首古诗
2019/07/02 职场文书