首页 > 代码库 > vue系列之项目打包

vue系列之项目打包

2024-09-05 15:54:21   212人阅读

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 = http://www.mamicode.com/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系列之项目打包


联系
我们