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已經不能被調試