用Vue寫個前端小遊戲 I -- 純Vue篇

之前一直沒時間紀錄用VUE這個框架碰到什麼雷
今天終於有機會一一紀錄，也希望能夠幫助到一些卡住的人～
起因就是我想用Websocket寫個小遊戲之類的
但是如果不用框架寫遊戲就是體力的終點啊哈哈哈哈哈哈哈哈

這個小遊戲還在生產中，有興趣的人可一起來看看
=> https://github.com/hazel-shen/web-game

首先起個VUE的boilerplate

我在這邊是使用vue-cli@3
文件請參考:
https://cli.vuejs.org/

Command:

vue create web-game

然後一個可以用的前端框架就會呈現在眼前，請看ReadMe or package.json這個檔案了解如何dev & production
接下來我遇到了兩個雷, 於是乎記下來

雷點一 Router會顯示＃字

REF => https://router.vuejs.org/guide/essentials/history-mode.html

這其實是Vue Router一個特性，他讓你用錨點點的方式加載你要的頁面區塊
於是乎看起來像是跑到不同頁，但是其實在同一個頁面
但實際上我會把這醜醜的井字鍵拿掉
所以我加了

export default new Router({
  mode: 'history', <- This line
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

在 src/router/index.js

雷點二 沒辦法用ngrok看dev的頁面

Ref => https://stackoverflow.com/questions/45425721/invalid-host-header-when-ngrok-tries-to-connect-to-react-dev-server

由於我要測試遊戲頁面在真實手機上面到底長什麼樣子
但每次都要Build然後起個webserver還是很夠工
所以我就打算一邊用ngrok看一邊開發

但沒想到！！

傻眼，如果你在某個版本底下，或許可以參考這個討論串的解法

https://github.com/webpack/webpack-dev-server/issues/882

但我用的是最新版
不管host改成0.0.0.0 還是disableHostCheck: true
通通沒效
所以我只好使出rewrite header大法

ngrok http 8080 -host-header="localhost:8080"

噎屎 畫面出來了

雷點三 找不到靜態頁面

npm run build出來的靜態頁面會找不到static files
如果要解決這個問題
會需要去調整 ./config/index.js 的設定

build: {
   // Template for index.html
   index: path.resolve(__dirname, '../dist/index.html'),

   // Paths
   assetsRoot: path.resolve(__dirname, '../dist'),
   assetsSubDirectory: 'static',
   assetsPublicPath: '/',

但我印象中我好像沒有調到這塊
最新版作者應該有把這個問題修掉
如果是用Vue init這個命令產生boilerplate的人應該會有一樣的問題
就動動手調整一下吧！

下一篇來講一下我用Express起webserver和部署到heroku時遇到的雷點