vue系列之项目打包

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