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五图轮播切换实用版
Aug 17 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
Jul 29 Javascript
JS实现简单的键盘打字的效果
Apr 24 Javascript
javascript下拉列表中显示树形菜单的实现方法
Nov 17 Javascript
jquery实现右侧栏菜单选择操作
Mar 04 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
JS中promise化微信小程序api
Apr 12 Javascript
基于iview-admin实现动态路由的示例代码
Oct 02 Javascript
浅析js实现网页截图的两种方式
Nov 01 Javascript
JS XMLHttpRequest原理与使用方法深入详解
Apr 30 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 保留字列表
2012/10/04 PHP
PHP mkdir()无写权限的问题解决方法
2014/06/19 PHP
destoon后台网站设置变成空白的解决方法
2014/06/21 PHP
Zend Framework入门教程之Zend_Registry组件用法详解
2016/12/09 PHP
js window.event对象详尽解析
2009/02/17 Javascript
老鱼 浅谈javascript面向对象编程
2010/03/04 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
JavaScript起点(严格模式深度了解)
2013/01/28 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
2014/04/17 Javascript
AngularJS入门教程之学习环境搭建
2014/12/06 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
jquery实现的点击翻书效果代码
2015/11/04 Javascript
SpringMVC返回json数据的三种方式
2015/12/10 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
2016/07/19 Javascript
jQuery is not defined 错误原因与解决方法小结
2017/03/19 Javascript
nodejs中密码加密处理操作详解
2018/03/20 NodeJs
详解Java中String JSONObject JSONArray List转换
2020/11/13 Javascript
用Python设计一个经典小游戏
2017/05/15 Python
Python断言assert的用法代码解析
2018/02/03 Python
Python基于win32ui模块创建弹出式菜单示例
2018/05/09 Python
Python推导式简单示例【列表推导式、字典推导式与集合推导式】
2018/12/04 Python
Pytorch 实现冻结指定卷积层的参数
2020/01/06 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
Jupyter Notebook 文件默认目录的查看以及更改步骤
2020/04/14 Python
在Django中自定义filter并在template中的使用详解
2020/05/19 Python
python如何随机生成高强度密码
2020/08/19 Python
python使用布隆过滤器的实现示例
2020/08/20 Python
什么造成了Java里面的异常
2016/04/24 面试题
临床医学大学生求职信
2013/09/28 职场文书
小学生中国梦演讲稿
2014/04/23 职场文书
五年级作文之想象作文
2019/10/30 职场文书
python实现socket简单通信的示例代码
2021/04/13 Python
mysql定时自动备份数据库的方法步骤
2021/07/07 MySQL
利用Python实现模拟登录知乎
2022/05/25 Python