vue完成项目后,打包成静态文件的方法


Posted in Javascript onSeptember 03, 2018

vue完成项目后,如何打包成静态文件,并且用Node调试

打包

1、修改config里面的index.js里面的productionSourceMap为false,默认情况是true(true代表打包环境是开发环境,可以进行调试;false表示生产环境,正式上线的)

2.在cmd里面运行npm run build,(运行的是build里面的build.js文件)

生成的包放在dist下面

vue完成项目后,打包成静态文件的方法

使用node进行调试

1、在根目录下创建prod.server.js文件,这个文件的作用是作为一个小的httpserver,在正常开发下,可以直接把dist里面的文件放到tomcat里面进行调试

prod.server.js代码

/**
 * Created by Administrator on 2017/2/22.
 */
 var express = require('express')
 var config = require('./config/index')
 
 var port = process.env.PORT || config.build.port
 
 var app= express()
 
 var router = express.Router()
 
 router.get('/',function (req, res, next) {
 req.url = '/index.html'
 next()
 })
 
 app.use(router)
 
 //异步接口
var seller=require('./src/data/data.json')
var apiRoutes = express.Router()
apiRoutes.get('/seller',function (req,res) {
 res.json({
 data:seller
 })
})
app.use('/api', apiRoutes); //定义express静态目录 app.use(express.static('./dist')) var autoOpenBrowser = !!config.dev.autoOpenBrowser var uri = 'http://localhost:' + port var opn = require('opn') //启动express module.exports = app.listen(port, function (err) { if (err) { console.log(err) return } // when env is testing, don't need open it if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') { opn(uri) } })

以上这篇vue完成项目后,打包成静态文件的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS对象与JSON格式数据相互转换
Feb 20 Javascript
JavaScript中this的使用详解
Nov 08 Javascript
jqGrid中文文档之选项设置
Dec 02 Javascript
JavaScript+html5 canvas实现本地截图教程
Apr 16 Javascript
基于Javascript实现倒计时功能
Feb 22 Javascript
Angular 中 select指令用法详解
Sep 29 Javascript
微信小程序 UI与容器组件总结
Feb 21 Javascript
微信小程序用户自定义模版用法实例分析
Nov 28 Javascript
JavaScript基础心法 数据类型
Mar 05 Javascript
使用webpack将ES6转化ES5的实现方法
Oct 13 Javascript
js实现炫酷光感效果
Sep 05 Javascript
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
vue填坑之webpack run build 静态资源找不到的解决方法
Sep 03 #Javascript
webpack4 处理CSS的方法示例
Sep 03 #Javascript
webpack4 CSS Tree Shaking的使用
Sep 03 #Javascript
解决Vue+Element ui开发中碰到的IE问题
Sep 03 #Javascript
webpack4 处理SCSS的方法示例
Sep 03 #Javascript
解决vue打包css文件中背景图片的路径问题
Sep 03 #Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
Sep 03 #Javascript
You might like
在普通HTTP上安全地传输密码
2007/07/21 PHP
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
PHP遍历XML文档所有节点的方法
2015/03/12 PHP
codeigniter实现get分页的方法
2015/07/10 PHP
jquery创建div 实现代码
2009/04/27 Javascript
JS获取父节点方法
2009/08/20 Javascript
判断window.onload是否多次使用的方法
2014/09/21 Javascript
浅谈jQuery事件绑定原理
2015/01/02 Javascript
jQuery实现checkbox全选的方法
2015/06/10 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
2015/08/28 Javascript
jquery专业的导航菜单特效代码分享
2015/08/29 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
2015/09/04 Javascript
javascript如何创建对象
2016/08/29 Javascript
JS库中的Particles.js在vue上的运用案例分析
2017/09/13 Javascript
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
2018/12/11 Javascript
JS实现简单省市二级联动
2019/11/27 Javascript
Python字符串和文件操作常用函数分析
2015/04/08 Python
Python栈类实例分析
2015/06/15 Python
深入浅析python with语句简介
2018/04/11 Python
Pycharm+Scrapy安装并且初始化项目的方法
2019/01/15 Python
Python实现树莓派摄像头持续录像并传送到主机的步骤
2020/11/30 Python
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
2012/12/26 HTML / CSS
药学专业毕业生求职信
2013/10/20 职场文书
销售自荐信
2013/10/22 职场文书
自我评价如何写好?
2014/01/05 职场文书
中专自我鉴定
2014/02/05 职场文书
协议书的格式
2014/04/23 职场文书
2015新学期家长寄语
2015/02/26 职场文书
加薪通知
2015/04/25 职场文书
承诺书的签字人,需不需要承担相应的责任?
2019/07/09 职场文书
CSS3 实现的图片悬停的切换按钮
2021/04/13 HTML / CSS
linux中nohup和后台运行进程查看及终止
2021/06/24 Python
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS
Java版 单机五子棋
2022/05/04 Java/Android