webpack

webpack架設5 - 安裝router-link與webpack-dev-server

second9040

前面幾篇文章結束之後我們手邊有個簡單的專案了，

接下來我們來試試架個最簡單的網站。

 

在src/views資料夾中新增

header.vue, footer.vue, cat1.vue, cat2.vue, cat3.vue, catAll.vue

 

header.vue

<template>
　<div style="background: #55ff55;">
　　<router-link to="/">HOME</router-link>
　　<p>header</p> 
　</div>
</template>

 
cat1.vue

<template>
　<div style="background: #aabbcc;">
　　<p>cat1</p> 
　　<router-link to="/">cat1</router-link>
　　<router-link to="/cat2">cat2</router-link>
　　<router-link to="/cat3">cat3</router-link>
　　<router-link to="/catAll">catAll</router-link>
　</div>
</template>

 

其他code只差在css就不貼了XD

有興趣的朋友可以參考我的github

 

router-link

router-link是vue提供的一個路由組件，

網頁渲染時會渲染成<a>，

而<a>跟<router-link>的差別之一是

router-link可以做到不刷新即換頁的效果。

可以避免頁面一多，每次換頁每次閃的問題，網站體驗會好很多。

使用之前要先安裝。
 

npm install vue-router --save

 

安裝完成後修改router.js

import VueRouter from 'vue-router';
Vue.use(VueRouter)

然後把會用到的頁面都放import進來，注意相對路徑。

修改後的router.js

import Vue from 'vue'
import VueRouter from 'vue-router';
import isheader from '../views/header.vue'
import isfooter from '../views/footer.vue'
import cat1 from '../views/cat1.vue'
import cat2 from '../views/cat2.vue'
import cat3 from '../views/cat3.vue'
import catAll from '../views/catAll.vue'

Vue.use(VueRouter) 

const router = new VueRouter({
  linkActiveClass: 'active',
  history: true,
  mode: 'history',
  routes: [
    { path: '/', component: cat1 },
    { path: '/cat2', component: cat2 },
    { path: '/cat3', component: cat3 },
    { path: '/catAll', component: catAll }
  ]
})
export default router

new Vue({
  el: '#app',
  router,
  components: {
    isheader,
    isfooter
  }
})

 
這邊設定的router屬性:

linkActiveClass 定義路由被選中時的class名稱。

history 設定使用HTML5加入的history.pushState、history.replaceState來管理歷史紀錄。

mode 預設為hash模式，網址會有#字號。

historyApiFallback

這邊直接拿別人文章說明的，其實看了幾遍還是不太懂XDDD 當作作筆記了。

devServer.historyApiFallback用於方便的開發使用HTML5 HistroyAPI的單頁應用。
 

這類單頁應用要求服務器針對任何命中的路由都返回一個對應的HTML文件，例如在訪問 http://localhost/user 和 http ://localhost/home 時都返回index.html文件，瀏覽器端的JavaScript代碼會從URL裡解析出當前的狀態，顯示對應的界面。

這會導致任何請求都會返回index.html文件，這只能用於只有一個HTML文件的應用。

如果應用由多個單頁應用組成，這時就需要DevServer根據不同的請求返回不同的HTML文件：配置如下：

historyApiFallback: { //使用正则匹配命中路由
　rewrites: [
　　{from: /^\/user/, to: '/user.html'},
　　{from: /^\/game/, to: '/game.html'},
　　{from: /./, to: '/index.html'}
　]
}

 

參考資料

<router-link>

操控瀏覽器歷史紀錄

HTML5 History 模式
 

component名稱的部分要注意html大小寫視為相同，

不過測試過後，全大寫(例如: <TEST></TEST>)是不行的。

會得到下列錯誤訊息

vue.js:633 [Vue warn]: Unknown custom element: <test> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in <Root>)

 

不過如果是<Test></Test>這樣子，就沒問題。
 

注意保留字，所以這邊header、footer多加個前綴is。
 

設定完router之後，我們改一下index.html

<!-- index.html  -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"> 
  <title>webpackDemo</title>
</head>
<body>
  <div id="app"> 
    <isheader></isheader>
    <router-view></router-view>
    <isfooter></isfooter>
  </div> 
</body>
</html>

 

router-view由route控制，

這樣寫就是我的每個頁面都有isheader與isfooter的內容，

只有router-view在換。

 

而因為前面已經安裝了把html包進dist的 html-webpack-plugin

所以這行就可以拿掉了

<script src="./dist/bundle.js"></script>

(不然會報錯XD)

 

component名字的部分不能偷懶 寫成 <isheader/>

必須要寫 <isheader></isheader>

否則顯示上會有異常。

 

完成以上設定後，查看畫面就要看dist裡的index.html了。

npm run build 看一下畫面。

然後會發現，咦~~

只有 header 跟 footer ，router-view 預設的 cat1 沒有出現 ???
　
 

這是因為我們目前為止都還在本機上作業，

router-view的東西需要放到server上才能正常顯示出 「切換頁面」的效果。

但是我們沒有server怎麼辦！

我們前端攻城獅要是能自己架server還不趕快轉行R!!(大誤)

 

webpack-dev-server

只是要本機練習的話可以使用這個，

webpack-dev-server是webpack提供的一個可以在本機上操作的虛擬server。

 

webpack.config.js 設定devServer　

devServer: {
　contentBase: path.resolve(__dirname, 'dist'),
　hot: true, 　
　historyApiFallback: true
},

 

contentBase 定義使用devServer時你要進去的根目錄，默認是專案根目錄。

hot 設定hot reload，儲存後重整即可看到效果，不用重新下指令。

port 沒有特別設定的話預設使用8080，如果被占用就使用8081

 

package.json 新增serve

"scripts": {
　"test": "echo \"Error: no test specified\" && exit 1",
　"build": "webpack",
　"serve": "webpack-dev-server"
},

 

設定完成之後儲存，

改動到webpack.config.js或package.json等設定檔的操作要重新build。

npm run build
npm run serve

 

在瀏覽器網址列輸入 http://localhost:8080/ 就可以看到網站了。

這時候應該就可以看到router-view預設的cat1有正常顯示出來了。

然後你。終於。可以開始愉快的coding了!!!
 

參考資料

Development

Webpack 中 path/publicPath/contentBase 的关系 #39

深入浅出webpack学习(8)--配置DevServer

 

接著你可能會發現，

在這個server上我竟然不能hot reload????

我明明確實有配置hot:true，為。什。麼。沒有用?

難道我每改一個小地方就要先 npm run build 再 npm run serve 然後再f5嗎????

這不是不行，但很不科學RRR

這個問題困擾我有點久，到最後我還是不明白為什麼，

不過你各位大大直接到 webpack.config.js 拿掉 output.publicPath

就可以正常的hot reload了喔!!!

output: {
　path: path.join(__dirname, 'dist'),
　filename: 'bundle.js', // 這個逗點記得也拿掉R~
　publicPath: './'
},

 

記得也要build再serve。

 

參考資料

Webpack-dev-server compiles files but does not refresh or make compiled javascript available to browser

 
然後終於要開始寫點別的code，又發現...

天rrrr...HMR製造的console.log也太煩太干擾視線了吧!!!能不能關掉???

[HMR] App is up to date.
[WDS] App updated. Recompiling...
[WDS] App hot update...
[HMR] Checking for updates on the server...

 

修改一下package.json
serve的部分加上 --client-log-level error

"scripts": {
　"test": "echo \"Error: no test specified\" && exit 1",
　"build": "webpack",
　"serve": "webpack-dev-server --client-log-level error"
},

 

一樣記得build之後再serve，

然後就會得到一個一樣可以hot reload但是相對乾淨的console.log視窗了!!!
 

參考資料

How to quiet the console.log outputs? #79

 

以上就是router-link跟webpack-dev-server的一些踩坑記錄啦。