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 相关文章推荐
使用jQuery同时控制四张图片的伸缩实现代码
Apr 19 Javascript
js创建对象的方式总结
Jan 10 Javascript
用js判断是否为360浏览器的实现代码
Jan 15 Javascript
EasyUI实现第二层弹出框的方法
Mar 01 Javascript
jquery让指定的元素闪烁显示的方法
Mar 17 Javascript
JavaScript中创建字典对象(dictionary)实例
Mar 31 Javascript
AngularJS 最常用的功能汇总
Feb 17 Javascript
理解javascript定时器中的setTimeout与setInterval
Feb 23 Javascript
Vue表单验证插件的制作过程
Apr 01 Javascript
Electron vue的使用教程图文详解
Jul 05 Javascript
微信小程序实现分页加载效果
Nov 19 Javascript
vue.js watch经常失效的场景与解决方案
Jan 07 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
PHP脚本的10个技巧(2)
2006/10/09 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
js类中的公有变量和私有变量
2008/07/24 Javascript
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
JavaScript 浮点数运算 精度问题
2009/10/06 Javascript
教你使用javascript简单写一个页面模板引擎
2015/05/05 Javascript
详解Node.js模块间共享数据库连接的方法
2016/05/24 Javascript
Vue resource中的GET与POST请求的实例代码
2017/07/21 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
微信小程序自定义toast组件的方法详解【含动画】
2019/05/11 Javascript
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
JS实现移动端点击按钮复制文本内容
2019/07/28 Javascript
微信小程序wxs实现吸顶效果
2020/01/08 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
js实现点击上传图片并设为模糊背景
2020/08/02 Javascript
[01:05:36]VP vs TNC Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
[01:26]神话结束了,却也刚刚开始——DOTA2新英雄玛尔斯驾临战场
2019/03/10 DOTA
Python语言编写电脑时间自动同步小工具
2013/03/08 Python
Python转换HTML到Text纯文本的方法
2015/01/15 Python
在Django框架中编写Context处理器的方法
2015/07/20 Python
简单总结Python中序列与字典的相同和不同之处
2016/01/19 Python
Python实现Sqlite将字段当做索引进行查询的方法
2016/07/21 Python
详解python中字典的循环遍历的两种方式
2017/02/07 Python
Python编程判断一个正整数是否为素数的方法
2017/04/14 Python
Django+Ajax+jQuery实现网页动态更新的实例
2018/05/28 Python
python GUI库图形界面开发之PyQt5复选框控件QCheckBox详细使用方法与实例
2020/02/28 Python
python中turtle库的简单使用教程
2020/11/11 Python
飞利浦法国官网:Philips法国
2019/07/10 全球购物
衰败城市英国官网:Urban Decay英国
2020/04/29 全球购物
JSF界面控制层技术
2013/06/17 面试题
春节请假条
2014/04/11 职场文书
班子四风对照检查材料
2014/08/21 职场文书
任命书怎么写
2015/03/02 职场文书
Python获取百度热搜的完整代码
2021/04/07 Python
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电