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实现的一个Flash滚动轮换显示图片代码生成器
Mar 14 Javascript
JavaScript中判断整字类型最简洁的实现方法
Nov 08 Javascript
在JavaScript中正确引用bind方法的应用
May 11 Javascript
JS实现为排序好的字符串找出重复行的方法
Mar 02 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
Jun 21 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
Oct 13 Javascript
vue-router 组件复用问题详解
Jan 22 Javascript
小试SVG之新手小白入门教程
Jan 08 Javascript
微信小程序实现获取小程序码和二维码java接口开发
Mar 29 Javascript
layui原生表单验证的实例
Sep 09 Javascript
vue 路由守卫(导航守卫)及其具体使用
Feb 25 Javascript
ant-design-vue中tree增删改的操作方法
Nov 03 Javascript
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
一些常用的php简单命令代码集锦
2007/09/24 PHP
详解PHP中的mb_detect_encoding函数使用方法
2015/08/18 PHP
php解析非标准json、非规范json的方式实例
2020/12/10 PHP
window.js 主要包含了页面的一些操作
2009/12/23 Javascript
十个优秀的Ajax/Javascript实例网站收集
2010/03/31 Javascript
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
JavaScript中的闭包(Closure)详细介绍
2014/12/30 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
2017/06/12 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
Angular弹出模态框的两种方式
2017/10/19 Javascript
vue 实现axios拦截、页面跳转和token 验证
2018/07/17 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
2019/05/05 Javascript
vue视图不更新情况详解
2019/05/16 Javascript
webpack自动打包和热更新的实现方法
2019/06/24 Javascript
Javascript实现简易天数计算器
2020/05/18 Javascript
vue 页面跳转的实现方式
2021/01/12 Vue.js
Python中decorator使用实例
2015/04/14 Python
Python while、for、生成器、列表推导等语句的执行效率测试
2015/06/03 Python
Python 爬虫的工具列表大全
2016/01/31 Python
OpenCV实现人脸识别
2017/04/07 Python
python基础练习之几个简单的游戏
2017/11/10 Python
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
Pycharm+Python工程,引用子模块的实现
2020/03/09 Python
印尼在线精品店:Berrybenka.com
2016/10/22 全球购物
中国网上药店领导者:1药网
2017/02/16 全球购物
美国踏板车和轻便摩托车销售网站:Mega Motor Madness
2020/02/26 全球购物
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
古汉语文学求职信范文
2014/03/16 职场文书
意向协议书范本
2014/04/23 职场文书
村抢险救灾方案
2014/05/09 职场文书
委托书的格式
2014/08/01 职场文书
九九重阳节标语
2014/10/07 职场文书
2015年学校办公室工作总结
2015/05/26 职场文书
OpenCV绘制圆端矩形的示例代码
2021/08/30 Python