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 相关文章推荐
javascript 文档的编码问题解决
Mar 01 Javascript
jQuery基础框架浅入剖析
Dec 27 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
Apr 22 Javascript
JS判断客户端是手机还是PC的2个代码
Apr 12 Javascript
asp知识整理笔记3(问答模式)
Sep 27 Javascript
DWR中各种java方法的调用
May 04 Javascript
JavaScript易错知识点整理
Dec 05 Javascript
解决Angular.Js与Django标签冲突的方案
Dec 20 Javascript
Angular 如何使用第三方库的方法
Apr 18 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
基于VUE实现判断设备是PC还是移动端
Jul 03 Javascript
5种方法告诉你如何使JavaScript 代码库更干净
Sep 15 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 chr() ord()中文截取乱码问题解决方法
2008/09/08 PHP
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
PHP+jQuery 注册模块开发详解
2014/10/14 PHP
php之static静态属性与静态方法实例分析
2015/07/30 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
DOM相关内容速查手册
2007/02/07 Javascript
Javascript & DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
javascript循环变量注册dom事件 之强大的闭包
2010/09/08 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
2013/04/21 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
限制textbox或textarea输入字符长度的JS代码
2013/10/16 Javascript
Javascript验证上传图片大小[前台处理]
2014/07/18 Javascript
jquery根据锚点offset值实现动画切换
2014/09/11 Javascript
JavaScript检测实例属性, 原型属性
2015/02/04 Javascript
实现前后端数据交互方法汇总
2015/04/07 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
2017/05/11 Javascript
实例分析vue循环列表动态数据的处理方法
2018/09/28 Javascript
跟老齐学Python之关于类的初步认识
2014/10/11 Python
Django使用Mysql数据库已经存在的数据表方法
2018/05/27 Python
Python使用Flask-SQLAlchemy连接数据库操作示例
2018/08/31 Python
python3图片文件批量重命名处理
2019/10/31 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
美国生鲜及杂货电商:FreshDirect
2018/01/29 全球购物
澳大利亚手表品牌:Time IV Change
2018/10/06 全球购物
医学护理毕业生自荐信
2013/11/07 职场文书
试用期自我鉴定范文
2014/03/20 职场文书
《有趣的发现》教学反思
2014/04/15 职场文书
旷工辞退通知书
2015/04/17 职场文书
2019年英语版感谢信(8篇)
2019/09/29 职场文书
Spring mvc是如何实现与数据库的前后端的连接操作的?
2021/06/30 Java/Android
使用 MybatisPlus 连接 SqlServer 数据库解决 OFFSET 分页问题
2022/04/22 SQL Server
Java版 单机五子棋
2022/05/04 Java/Android