此方法可以自己本地寫介面，自己打包vue-cli，然後測試打包後的檔案是否正確。

1.本地獲取自己寫到的node.js介面

可能會遇到跨域的問題，可以看我的部落格跨域問題

1.1.在vue頁面中引入自己node.js寫的介面（關於node.js的教程可以看我以前的部落格）

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
import {AjaxUrl} from '../common/ajax/serverPublic'
 
;
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    };
  },
  methods: {
    get() {
      this.$ajax.get('http://127.0.0.1:3000/hcd').then((response) => {
        console.log(response);
      });
    }
  },
  created() {
    this.get();
  }
};
</script
 
>

1.2.對應的node.js

var express = require("express");
var app = express();
// 設定響應的頭部資訊
const setHeader = (req, res, next) => {
  res.header('Access-Control-Allow-Credentials', 'true');
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Content-Type, Content-Length, Authorization, X-Powered-By, Accept,X-Requested-With, set-cookie"
 
);
  res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
  res.header("X-Powered-By", ' 3.2.1')
  res.header("Content-Type", "application/json;charset=utf-8");
  next();
}

// 介面
app.get("/hcd", function (req, res) {
  res.json({
    status: '1',
    msg: {
      name: 'hcd'
    }
  })
});

app.listen(3000);

將其跑起來
node node.js
我們看vue本地server執行起來的樣子

2.測試dist檔案

2.1 打包vue專案

npm run build

生成dist檔案

2.2.將dist放在和node.js同目錄下面

在node.js中引入靜態檔案dist資料夾

app.use(express.static('./dist'));

執行node.js

node node.js