如何在本地利用nodejs中的express來運行打包後的vue-cli完成的項目(已解決vue-router的history模式)

      我們在利用vue腳手架(vue-cli)開發vue的項目時，在開發完畢是需要執行打包命令(npm run build)進行打包，打包後默認生成一個新的文件夾dist，項目的所有前端文件都在這個文件裏面。這個時候如果我們需要以本地服務打開這個文件的時候，可以利用其它軟件進行打開，比如phpstudy、xampp之類的軟件開啓本地服務端口(http://127.0.0.1或者http://localhost:80)進行瀏覽已經打包完成的項目。

      在這裏，將介紹利用node中的express來打開本地端口進行瀏覽。

      一、項目已經打包到項目根目錄dist文件夾中；

      二、直接在項目中進行下載express(npm i express -d)；

      三、直接在項目中進行下載中間件connect-history-api-fallback(npm i connect-history-api-fallback -d)

      四、創建prod.server.js，內容如下：

//引入express
const express = require('express');
//引入中間件，解決history模式
const history = require('connect-history-api-fallback');
//監聽的端口
const port = 9999;
const app = express();
//使用中間件
app.use(history());
//設置靜態文件路徑
app.use(express.static('./dist'));
//監聽端口
module.exports = app.listen(port, function (err) {
    if (err) {
        console.log(err)
        return
    } else {
        console.log('Listening at http://localhost:' + port + '\n')
    }
})

      五、在項目中執行 node prod.server.js，就可以在本地打開http://localhost:9999進行瀏覽項目

注意：爲什麼要用端口進行瀏覽項目，因爲有網絡請求的時候，直接打開項目，有的時候是不能進行請求的，還有一個就是跨域的問題，這個問題最好後端解決，我的後端是使用PHP來寫的。給個示例：

function data_json($params)
{
    //跨域訪問的時候纔會存在此字段
    $host_name = isset($_SERVER['HTTP_ORIGIN']) ? $_SERVER['HTTP_ORIGIN'] : '';
    $allow_origin = array(
        'http://www.gsite.com',
        'http://gsite.com',
        'http://localhost:8080',
        'http://localhost:8081',
        'http://localhost:9999'
    );
    $origin = 'http://www.gsite.com';
    if (in_array($host_name, $allow_origin)) {
        $origin = $host_name;
    }
    $headers = [
        "Access-Control-Allow-Origin" => $origin,
        "Access-Control-Allow-Credentials" => 'true',
        "Access-Control-Allow-Headers" => "Origin, X-Requested-With, Content-Type, Accept",
        "Access-Control-Allow-Methods" => "GET, POST, PUT"
    ];
    return json($params)->header($headers);
}

      其他後端語言可自行百度解決，其實這個問題，後端解決起來是非常方便的。

然後給一個我的express運行起來的圖片：