vue-cli + es6 多頁面專案開發及部署

老李?發表於2018-03-21
Vue

前段時間專案組計劃快速開發一個新的App專案，App開發那邊提供殼子和部分系統級功能，所有的頁面由h5完成，考慮相容性安卓4.1及ios7.1。全新的專案，沒有歷史包袱，就嘗試了新的開發模式，採用了webpack + vue-cli + vue-router + es6 + axios這一套，從webpack配置到檔案目錄，從開發流程到上線部署，摸索嘗試，到目前第一版已經上線。後面會繼續優化，先把目前的基本部署方式記錄下來。

webpack -- ^3.6.0  |   vue -- ^2.5.2    | vue-router -- ^3.0.1  |    axios -- ^0.17.1
複製程式碼

簡介

  • 專案採用前後端分離，後端開發只負責提供介面及靜態伺服器
  • 前端採用多個入口、多個單頁（每個單頁可能含vue-router路由到不同的子頁面）的方式，最終在dist下生成多個.html及對應的.js/.css檔案
  • 域名根目錄直接指向到npm run build之後生成的dist目錄，可以通過http://m.example.com/index.html直接訪問到index.html

最終生成的dist目錄類似於：

  • dist
    • index.html
    • center/
      • index.html
      • regist.html
      • login.html
    • static/
      • js/
        • vendor.[chunkhash].js
        • index.[chunkhash].js
        • regist.[chunkhash].js
        • login.[chunkhash].js
      • css/
        • index.[chunkhash].css
        • regist.[chunkhash].css
        • login.[chunkhash].css

例：http://m.example.com/index.html可以訪問到首頁，http://m.example.com/center/regist.html則訪問到註冊頁，而http://m.example.com/center/regist.html#agreement訪問到使用者協議頁

目錄結構

  • dist: 如上，不跟隨版本控制
  • build: webpack構建相關配置
  • config: 開發相關配置
    • webpack.user.conf.js: 新建的自定義配置檔案，理論上對webpack的配置更改都在這裡進行，然後對webpack.dev.conf.js和webpack.dev.prod.js進行merge覆蓋
  • node_modules: 外掛及依賴，不跟隨版本控制
  • src: 開發目錄
    • assets: 存放靜態資源，含base.js/base.css/plugins/images
    • components: 一些可能公用的小元件
    • entry: webpack打包的入口檔案，有多個HtmlWebpackPlugin的例項，每個例項都對應一個入口，每個入口打包出一個頁面
    • router: 某些頁面可能會用到vue-router實現前端路由，統一在此資料夾下定義，會被entry中的入口js引入使用
    • template: 存放HtmlWebpackPlugin打包基於的模板頁，多個入口可以共用一個模板頁。但實際開發中可能某些入口有私有的邏輯，需單獨建立模板
    • page: 存放實際頁面元件及組裝頁面
  • package.json: 包資訊及依賴

例：如果我們想最終生成http://m.example.com/center/regist.html且含有前端路由的話，需要涉及到的檔案有：

1. src/entry/regist.js，以建立入口檔案，供`HtmlWebpackPlugin`使用
2. config/webpack.user.conf.js，新建入口，指定入口檔案為`src/entry/regist.js`；新建`HtmlWebpackPlugin`例項，指定打包後生成的檔案路徑、檔名及js
3. src/router/regist.js，因為涉及到前端路由，需要配置路由資訊
4. page/center/regist.vue、page/center/agreement.vue，進行頁面自身邏輯樣式的開發
複製程式碼

webpack配置

預設的webpack配置大體是採用build/webpack.base.js + build/webpack.dev.js/build/webpack.prod.js merge後的結果，為了方便實現統一配置，在config下新建了webpack.user.conf.js，再分別和build/webpack.dev.js/build/webpack.prod.js merge，因此頁面的配置，基本都在webpack.user.conf.js進行。

  • 配置項
    • context: 設定在package.json所在的根目錄
    • entry: 設定為src/entry/
    • ouput: 生產環境設定為/src/dist/，開發環境預設打包後放在記憶體中，不代表實際物理路徑，output具體配置：
    output: {
    path: path.resolve(__dirname, '../dist'),
    filename: 'static/js/[name].[chunkhash:16].js',
    chunkFilename: 'static/js/[id].[chunkhash:16].js',
    publicPath: '/pailifan/'
}
複製程式碼
    • plugins: 外掛配置
      • HtmlWebpackPlugin: new多個例項，每個例項對應一個單頁
      • CommonsChunkPlugin: 公共模組提取打包，預設指定將[vue.js -v2.5.2, vue-router.js -v3.0.1]打包，同時設定minChunks為Infinity以防止其他公用模組被打包進來
      new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',         /*在entry中指定vendor對應的模組為[vue.js,vue-router.js]*/
    filename: 'static/js/vendor.[chunkhash:16].js',
    minChunks: Infinity
})
複製程式碼

需求開發及部署流程

  1. 拉取程式碼
  2. 切換到package.json所在根目錄，執行npm i && npm run dev
  3. 新建頁面（見目錄結構部分的例）或者修改
  4. 提交程式碼，忽略目錄包括src/dist、src/node_modules
  5. 內測/外測/灰度/生產，執行npm i && npm run build，生產環境不能直接操作dist目錄（npm run build實際會先刪除dist目錄再生成，直接操作會導致釋出時檔案404），需先在釋出機生成dist後覆蓋到生產伺服器對應的dist目錄
  6. 版本回退，回退程式碼，然後執行npm i && npm run build，同釋出一致

其他第三方外掛和庫

  • axios: ajax庫，部分坑已經另一篇筆記中進行了解釋及提出解決方案
  • vue-touch: 手勢庫
  • es6-promise: 對Promise進行pollyfill

附: vue-cli + es6 + axios專案踩坑

相關文章