1. 程式人生 > >vue打包之後的專案執行

vue打包之後的專案執行

vue-cli專案最後總是不可避免進行打包操作,但是打包之後如何執行?,可以藉助下面node程式碼執行以及建立介面代理:

var express=require("express");

//專案的一個配置檔案,在這裡主要用來獲取生產環境的埠號
var config=require('./config/index.js');

var app = express();

//這部分主要用來建立介面代理
var apiRouter=express.Router();
var proxy=require('http-proxy-middleware');

//請求/api/XXX 會轉接到 https://wxapi.ajyaguru.com/jiangziAPI/servlet/XXX
app.use('/api',proxy('/api',{
  'target':'https://wxapi.ajyaguru.com/jiangziAPI/servlet',
  'changeOrigin':true,
  pathRewrite:{
    '^/api':''
  }
}))
//同上
app.use('/upload',proxy('/upload',{
  'target':'https://wxapi2.ajyaguru.com/backend/user/uplode',
  'changeOrigin':true,
  pathRewrite:{
    '^/upload':''
  }
}))
//配置靜態資源路徑(vue打包之後存放靜態資源的目錄)
app.use(express.static('./dist'));
//配置伺服器埠號
var port=process.env.PORT||config.build.port;
module.exports=app.listen(port,function(err){
  if(err){
    console.log(err);
    return
  }
  console.log('Listening at http://localhost:'+port+'\n')
})

之後執行該檔案就可以在對應埠下執行專案了