vuejs2-9 webpack打包设置

1 运行

npm run build

2 发现根目录下生成了一个dist目录

 --要通过服务器打开dist目录下index.html文件不能通过file方式打开

3 我们通过Nodejs创建一个server来访问dist下的index.html

3.1 项目根目录创建一个b-server.js文件

3.2 config/index.js 添加端口

3.3 b-server.js设置

/**
* test build index.html
*
* */
const express = require('express');
const config = require('./config/index');

var port = process.env.PORT || config.build.port; //端口设置

var app = express();
var router = express.Router();

//设置路由
router.get('/', (req, res, next) => {
  req.url = '/index.html';
  next();
});

app.use(router); //使用路由

//模拟后台对前台地址请求的处理
var appData = require('./data.json') // 获取data.json对象
var seller = appData.seller // 获取这个对象[seller]的内容
var goods = appData.goods // 获取这个对象[goods]的内容
var ratings = appData.ratings // 获取这个对象 [ratings]的内容

var apiRoutes = express.Router();

// 对前台/seller的处理
apiRoutes.get('/seller', function (req, res) {
  res.json({
    errno: 0,
    data: seller
  });
});

// 对前台/goods的处理
apiRoutes.get('/goods', function (req, res) {
  res.json({
    errno: 0,
    data: goods
  })
});
// 对前台/ratings的处理
apiRoutes.get('/ratings', function (req, res) {
  res.json({
    errno: 0,
    data: ratings
  });
});

app.use('/api', apiRoutes);

//设置静态资源目录
app.use(express.static('./dist'));

module.exports = app.listen(port, (err) => {
  if (err) {
    console.log(err);
  };
  console.log('Server running on http://localhost:' + port +'\n');
});

3.4 运行 b-server.js

node b-server.js

3.5  http://localhost:9000 输入网址查看效果

4 发现可以调试js--因为我们生成了map文件

5 去掉调试功能（不生成.map文件）

再重新打包一次 npm run build ,文件打包好后 运行 node b-server.js

6 再次查看， 发现js已经不能被调试