码迷,mamicode.com
首页 > 其他好文 > 详细

vue系列之项目打包

时间:2017-02-23 00:59:08      阅读:1304      评论:0      收藏:0      [点我收藏+]

标签:ons   dmi   tps   异步   作用   roc   ati   npm   list   

vue完成项目后,如何打包成静态文件,并且用Node调试

打包

1、修改config里面的index.js里面的productionSourceMap为false,默认情况是true(true代表打包环境是开发环境,可以进行调试;false表示生产环境,正式上线的)

2.在cmd里面运行npm run build,(运行的是build里面的build.js文件)

生成的包放在dist下面

技术分享

 

使用node进行调试

1、在根目录下创建prod.server.js文件,这个文件的作用是作为一个小的httpserver,在正常开发下,可以直接把dist里面的文件放到tomcat里面进行调试

prod.server.js代码

 1 /**
 2  * Created by Administrator on 2017/2/22.
 3  */
 4 var express = require(‘express‘)
 5 var config = require(‘./config/index‘)
 6 
 7 var port = process.env.PORT || config.build.port
 8 
 9 var app= express()
10 
11 var router = express.Router()
12 
13 router.get(‘/‘,function (req, res, next) {
14   req.url = ‘/index.html‘
15   next()
16 })
17 
18 app.use(router)
19 
20 //异步接口
21 var appData = require("./data.json");
22 var seller = appData.seller;
23 var goods = appData.goods;
24 var ratings = appData.ratings;
25 var apiRoutes = express.Router();
26 
27 apiRoutes.get(‘/seller‘,function (req,res) {
28   res.json({
29     errno: 0,
30     data: seller
31   });
32 });
33 
34 apiRoutes.get(‘/goods‘,function (req,res) {
35   res.json({
36     errno: 0,
37     data: goods
38   });
39 });
40 
41 apiRoutes.get(‘/ratings‘,function (req,res) {
42   res.json({
43     errno: 0,
44     data: ratings
45   });
46 });
47 
48 app.use(‘/api‘, apiRoutes);
49 
50 //定义express静态目录
51 app.use(express.static(‘./dist‘))
52 
53 var autoOpenBrowser = !!config.dev.autoOpenBrowser
54 var uri = ‘http://localhost:‘ + port
55 var opn = require(‘opn‘)
56 //启动express
57 module.exports = app.listen(port, function (err) {
58   if (err) {
59     console.log(err)
60     return
61   }
62 
63   // when env is testing, don‘t need open it
64   if (autoOpenBrowser && process.env.NODE_ENV !== ‘testing‘) {
65     opn(uri)
66   }
67 })


2、在config/index.js里面的bulid下添加一个port:9000

3、cmd  node prod.serve.js 

vue系列之项目打包

标签:ons   dmi   tps   异步   作用   roc   ati   npm   list   

原文地址:http://www.cnblogs.com/zhaobao1830/p/6431287.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!