vue-cli + es6 多頁面項目開發及部署

前段時間項目組計劃快速開發一個新的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項目踩坑
附： webpack.user.conf.js，會在 webpack.base.conf.js、 webpack.dev.conf.js和 webpack.dev.prod.js進行merge合併

const path = require('path')
const fs = require('fs')
const webpack = require('webpack')
const merge = require('webpack-merge')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const config = require('../config')

const defaultHtmlWebpackConfig = {
    template: './src/template/index.html'
    minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
    },
    chunksSortMode: 'dependency'
}

module.exports = {

    context: path.resolve(__dirname, '../'),
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: 'static/js/[name].[chunkhash:16].js',
        chunkFilename: 'static/js/[id].[chunkhash:16].js',
        publicPath: '/'
    },
    CommonsChunkPlugin: {
        Dev: [
            new webpack.optimize.CommonsChunkPlugin({
                name: 'vendor',
                filename: 'vendor.js',
                minChunks: Infinity
            })
        ],
        Prod: [
            new webpack.optimize.CommonsChunkPlugin({
                name: 'vendor',
                filename: 'static/js/common/vendor.[chunkhash:16].js',
                minChunks: Infinity
            })
        ]
    },
    entry: {
        vendor: ['vue', 'vue-router', 'es6-promise'],
        index: './src/entry/index/index.js',
        login: './src/entry/center/login.js'
    },
    HtmlWebpackPlugin: [
        // 首頁：index.html
        new HtmlWebpackPlugin(merge(defaultHtmlWebpackConfig, {
            title: "首頁",
            filename: path.resolve(__dirname, '../dist/index.html'),
            chunks: ['vendor', 'index']
        })),
        // 登陸註冊頁：center/login.html
        new HtmlWebpackPlugin(merge(defaultHtmlWebpackConfig, {
            title: "登陸",
            filename: path.resolve(__dirname, '../dist/center/login.html'),
            chunks: ['vendor', 'login']
        }))
    ]
}