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代码-----展开收起效果示例
Jul 03 Javascript
textarea 控制输入字符字节数(示例代码)
Dec 27 Javascript
JavaScript中String.prototype用法实例
May 20 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
js滑动提示效果代码分享
Mar 10 Javascript
学习使用bootstrap3栅格系统
Apr 12 Javascript
JavaScript中object和Object的区别(详解)
Feb 27 Javascript
Vue常用指令V-model用法
Mar 08 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
Mar 17 Javascript
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
Jan 09 Javascript
JS原形与原型链深入详解
May 09 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
linux php mysql数据库备份实现代码
2009/03/10 PHP
PHP CURL获取返回值的方法
2014/05/04 PHP
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
thinkphp四种url访问方式详解
2014/11/28 PHP
ThinkPHP实现支付宝接口功能实例
2014/12/02 PHP
php中heredoc与nowdoc介绍
2014/12/25 PHP
php微信开发之带参数二维码的使用
2016/08/03 PHP
JS版网站风格切换实例代码
2008/10/06 Javascript
jquery下jstree简单应用 - v1.0
2011/04/14 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
JavaScript包装对象使用介绍
2013/08/29 Javascript
使用js如何实现全选与全不选
2013/12/30 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
JavaScript轮播图简单制作方法
2017/02/20 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
vue-cli监听组件加载完成的方法
2018/09/07 Javascript
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
2020/07/17 Javascript
python字符串加密解密的三种方法分享(base64 win32com)
2014/01/19 Python
Python的ORM框架SQLObject入门实例
2014/04/28 Python
Python深入学习之上下文管理器
2014/08/31 Python
Python爬取网易云音乐上评论火爆的歌曲
2017/01/19 Python
Python爬虫设置代理IP的方法(爬虫技巧)
2018/03/04 Python
python看某个模块的版本方法
2018/10/16 Python
详解使用python绘制混淆矩阵(confusion_matrix)
2019/07/14 Python
python 中的[:-1]和[::-1]的具体使用
2020/02/13 Python
全球销量第一生发产品:Viviscal
2017/12/21 全球购物
英国最大的滑板品牌选择:Route One
2019/09/22 全球购物
SOA面试题:如何在SOA中实现松耦合
2013/07/21 面试题
优秀生推荐信范文
2013/11/28 职场文书
车贷收入证明范本
2014/01/09 职场文书
2015年大学社团工作总结
2015/04/09 职场文书
创业计划书之面包店
2019/09/12 职场文书
Golang 对es的操作实例
2022/04/20 Golang
Django框架之路由用法
2022/06/10 Python