---
# System prepended metadata

title: '[gmail-demo] 2019 / 12 / 6'
tags: [diary]

---

# [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 加上這段
```javascript
mounted() {
    this.axios
      .get("http://localhost:3000/posts")
      .then(response => (this.info = response))
      .catch(function(error) {
        // 请求失败处理
        console.log(error);
      });
  }
```
啟動後卻顯示：
![](https://i.imgur.com/4ZlQ8rj.png)

我將 上面代碼裡的 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 的問題? 又或是
![](https://i.imgur.com/5MKgTtn.png)

搜尋了網上一個解決方法是叫你到 node_modules 資料夾找到 sockjs-client > dist > sock.js 的 1605 行，將以下內容註解掉：
```javascript
  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 專案，不過到時候還是不知道自己問題卡在哪裡，所以還是來問你了哈哈

  

