手把手教你 vue-cli 單頁到多頁應用

發表於2018-06-05

vue-cli到多頁應用

前言:我有一個cli建立的vue專案,但是我想做成多頁應用,怎麼辦,廢話不多說,直接開擼~

約定:新增程式碼部分在//add和//end中間 刪除(註釋)程式碼部分在//del和//end中間,很多東西都寫在註釋裡

第一步:cli一個vue專案

新建一個vue專案 官網 vue init webpack demo
cli預設使用webpack的dev-server服務,這個服務是做不了單頁的,需要手動建一個私服叫啥你隨意 一般叫dev.server或者dev.client

第二步:新增兩個方法處理出口入口檔案(SPA預設寫死的)

進入剛剛建立vue專案 cd demo
在目錄下面找到build/utils.js檔案
修改部分:

  • utils.js

第三步:建立私服(不使用dev-server服務,自己建一個)

從express新建私服並配置(build資料夾下新建 我這裡叫webpack.dev.client.js)

  • webpack.dev.client.js

私服建立好了 安裝下依賴
有坑。。。
webpack和熱載入版本太高太低都不行
npm install webpack@3.10.0 –save-dev
npm install webpack-dev-middleware –save-dev
npm install webpack-hot-middleware@2.21.0 –save-dev
npm install http-proxy-middleware –save-dev

第四步:修改配置

  • webpack.base.conf.js

  • webpack.dev.conf.js

  • webpack.prod.conf.js

plugins最後加上.concat(utils.createHtmlWebpackPlugin([‘manifest’, ‘vendor’]))
test環境一樣

第五步:修改package.json 指令配置

scripts下面’dev’:
這樣執行的時候就不會走預設的dev-server而走你的私服了

第六步:建立測試檔案

src目錄下新建 views資料夾 (程式碼註釋裡有 當時配的目錄跟這個一致就可以 隨便你命名 遵循命名規範就行)
views 資料夾下新建兩個資料夾index和home 代表多頁 每頁單獨一個資料夾 資料夾下建對應檔案

打包改為相對路徑config/index.js
build下面

3073784422-5b0f614823a7c_articlex

最後,npm run dev 或者 npm run build

測試環境自己配 跟 生產環境差不多,就幾個配置引數不一樣

這個時候你會發現,特麼的什麼鬼文章 報錯了啊
稍安勿躁~
兩個地方,

  • 1.webpack.dev.client.js

這個assetsRoot cli建立的時候是沒有的 在config/index.js 下面找到dev加上

4198209571-5b0f69a5de0e6_articlex

  • 2.還是版本問題

webpack-dev-middleware 預設是3.1.3版本但是會報錯
具體哪個版本不報錯我也不知道

找不到invalid 原始碼裡面是有的
解除安裝webpack-dev-middleware

使用dev-server自帶的webpack-dev-middleware (cli單頁應用是有熱載入的)
重新install dev-server

1510784734-5b0f6b3d09383_articlex 1950268177-5b0f6b5628e02_articlex

總結:核心點就在建立並配置私服和修改出口入口配置,坑就在版本不相容

建議:cli一個vue的demo專案 從頭擼一遍 再在實際專案裡使用,而不是copy一下執行沒問題搞定~
建議而已,你怎麼打人,嗚嗚嗚~

快過節了,覺得本文對你有用的話請隨意打賞,讓作者可以買個棒棒糖吃~

——————————————-6.1更—————————————–
留了一個坑,一天了,有贊有收藏,沒見人評論指出坑,心痛的無法呼吸~

build 後 沒有引入共用模組

程式碼已更新~ build後可正常訪問…

注:內容有不當或者錯誤處請指正~轉載請註明出處~謝謝合作!

相關文章