# [gmail-demo] 2019 / 12 / 6
###### tags: `diary`

1. json-server 啟動後瀏覽器空白
2. sock.js 錯誤訊息

---

以下詳細說明:

昨天想說用 json-server 寫假 json 資料

安裝 json-server 跟 axios

npm install -g json-server
// 或
npm install -i json-server

試著在 LoginViews.vue 加上這段

mounted() {
    this.axios
      .get("http://localhost:3000/posts")
      .then(response => (this.info = response))
      .catch(function(error) {
        // 请求失败处理
        console.log(error);
      });
  }

啟動後卻顯示：

我將 上面代碼裡的 get.() 換成本地端的 8080 port，也就是平常用 npm run serve 指令開啟的網址，是可以成功顯示 json 資料的。但是開啟 json-server 那一串網址卻出現上面錯誤，因此到這邊我確認問題應該是跟 json-server 有關，但是爬了好多資料，大多數都直接貼一些代碼給你，說這樣可以解決。不過常常用這種方式解決 bug 我覺得似乎不太正確。想請問 Key 你在解決這樣的 bug 通常會怎麼去找關鍵字即發現問題。

### 補充
- 第一個問題：

執行完 json-server db.json 會出現這樣的訊息

Resources
http://localhost:3000/contact

Home
http://localhost:3000

第一個網址打開是看得到自己資料的
第二個卻無法顯示(瀏覽器畫面一片空白)

- 第二個問題:

看網路上說可能因為 wifi 的關係導致 ip 位置一直變換，所以出現像下面 sock.js 的問題? 又或是

搜尋了網上一個解決方法是叫你到 node_modules 資料夾找到 sockjs-client > dist > sock.js 的 1605 行，將以下內容註解掉：

  try {
    //self.xhr.send(payload);
  } catch (e) {
    self.emit('finish', 0, '');
    self._cleanup(false);
  }

結果又跳出另一個錯誤訊息

This relative module was not found:

* ./src/main.js in multi (webpack)-dev-server/client?http://172.20.10.3:8080/sockjs-node (webp
ack)/hot/dev-server.js ./src/main.js, multi (webpack)-dev-server/client?http://localhost (webp
ack)/hot/dev-server.js (webpack)-dev-server/client?http://172.20.10.3:8080/sockjs-node ./src/m
ain.js

目前卡在這邊，有想過是不是先將 node_module 重灌或是重啟一個 vue cli 專案，不過到時候還是不知道自己問題卡在哪裡，所以還是來問你了哈哈