Vue之通過http服務開啟build後的專案

vue的打包命令是npm run build，打包完直接開啟頁面是不行的，只能看到載入的靜態資源，需要啟動一個HTTP服務，然後訪問到打包後dist目錄下的檔案才能看到完整的專案，方法如下：
第一，在根目錄下config/index.js中增加埠port

port: 9000,

第二，根目錄下建一個啟動http服務的檔案product.sever.js

var express = require('express');//獲取express
var config = require('./config/index');//獲取根目錄config下的index.js

var port = process.env.PORT || config.build.port;//開啟的埠號等於當前環境或上面index.js裡增加的那個port

var app = express();

var router = express.Router();//express路由

router.get('/', function (req, res, next) {//返回index.html
  req.url = '/index.html';
  next();
});

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

var appData = require('./data.json');//訪問json，下面三條都是data.json的資料
var seller = appData.seller;
var goods = appData.goods;
var ratings = appData.ratings;

var apiRoutes = express.Router();

apiRoutes.get('/seller', function (req, res) {//配置介面獲取json裡的資料
  res.json({
    errno: 0,
    data: seller
  });
});

apiRoutes.get('/goods', function (req, res) {
  res.json({
    errno: 0,
    data: goods
  });
});

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, function (err) {//監聽port埠
  if (err) {
    console.log(err);
    return;
  }
  console.log('Listening at http://localhost:' + port + '\n')
});

第三，cmd進入根目錄資料夾，使用node啟動http服務

node product.sever.js

第四，通過localhost: 9000訪問就可以看到專案了