Vue路由配置history模式

我的博客: https://github.com/Daotin/fe-notes/issues


vue需要node.js嗎?

你可以用 script 標籤的形式引入vue.min.js 這樣的,不需要nodejs。

使用node有幾件事,打包部署,解析vue單文件組件,解析每個vue模塊,拼在一起,轉碼es6,less等,啓動測試服務器 localhost:8080, 幫你管理 vue-router等插件。

所以每次當我們使用 npm run dev 的時候,頁面會打開一個 localhost:3000 的頁面,這其實就是node爲我們啓動了一個Node.js 靜態文件服務器。

hash vs history

vue-router 默認 hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL,於是當 URL 改變時,頁面不會向後端發出請求。

當你使用 history 模式時,URL 就像正常的 url,例如 http://yoursite.com/user/id ,也好看!

不過這種模式要玩好,還需要後臺配置支持。因爲我們的應用是個單頁客戶端應用,如果後臺沒有正確的配置,當用戶在瀏覽器直接訪問 http://oursite.com/user/id 就會返回 404,這就不好看了。

所以呢,你要在服務端增加一個覆蓋所有情況的候選資源:如果 URL 匹配不到任何靜態資源,則應該返回同一個 index.html 頁面,這個頁面就是你 app 依賴的頁面。

前面不是說了,我們vue啓動了Nodejs靜態文件服務器了嗎?爲啥還不能直接使用history?

如果你在 history 模式下使用 Vue Router,是無法搭配簡單的靜態文件服務器的(也就是說你需要配置一下就可以藉助這個Nodejs使用history模式了,默認是不提供的)

例如,如果你使用 Vue Router 爲 /todos/42/ 定義了一個路由,開發服務器也已經配置了相應的 localhost:3000/todos/42 響應,但是一個爲生產環境構建架設的簡單的靜態服務器會卻會返回 404。

爲了解決這個問題,你需要配置生產環境服務器,將任何沒有匹配到靜態文件的請求回退到 index.html。

webpack配置history

方式1:通過命令行的方式

形如 webpack-dev-server --history-api-fallback,不過一般都是放到 scripts節點下,如:

// package.json
 "scripts": {
    "dev": "webpack-dev-server  --env.dev --history-api-fallback"
  }

方式2 在 webpack 配置文件的devServer配置

// webpack.config.js
devServer:{
  ...
 historyApiFallback: true
}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章