【vue】使用vue構建多頁面應用

先了解一些單頁面和多頁面的區別

mm	多頁應用模式MPA	單頁應用模式SPA
應用構成	由多個完整頁面構成	一個外殼頁面和多個頁面片段構成
跳轉方式	頁面之間的跳轉是從一個頁面跳轉到另一個頁面	頁面片段之間的跳轉是把一個頁面片段刪除或隱藏，加載另一個頁面片段並顯示出來。這是片段之間的模擬跳轉，並沒有開殼頁面
跳轉后公共資源是否重新加載	是	否
URL模式	http://xxx/page1.html http://xxx/page1.html	http://xxx/shell.html#page1 http://xxx/shell.html#page2
用戶體驗	頁面間切換加載慢，不流暢，用戶體驗差，特別是在移動設備上	頁面片段間的切換快，用戶體驗好，包括在移動設備上
能否實現轉場動畫	無法實現	容易實現（手機app動效）
頁面間傳遞數據	依賴URL、cookie或者localstorage，實現麻煩	因為在一個頁面內，頁面間傳遞數據很容易實現
搜索引擎優化（SEO）	可以直接做	需要單獨方案做，有點麻煩
特別適用的范圍	需要對搜索引擎友好的網站	對體驗要求高的應用，特別是移動應用
搜索引擎優化（SEO）	可以直接做	需要單獨方案做，有點麻煩
開發難度	低一些，框架選擇容易	高一些，需要專門的框架來降低這種模式的開發難度

為什么用Vue寫多頁面

vue只是一個工具，把他當做一個操作dom的工具來用寫多頁面，有單頁面的優勢同時是多頁面的表現形式（具體要看需求）

構建多頁面應用

准備工作

新建一個項目，項目需要一個"glob":"^7.0.3"的依賴

修改webpack的配置

我們需要更改的文件

• utils.js
• webpack.base.conf.js
• webpack.dev.conf.js
• webpack.prod.conf.js

utils.js在最后添加

// utils.js文件
/* 這里是添加的部分 ---------------------------- 開始 */

// glob是webpack安裝時依賴的一個第三方模塊，還模塊允許你使用 *等符號, 例如lib/*.js就是獲取lib文件夾下的所有js后綴名的文件
var glob = require('glob')
// 頁面模板
var HtmlWebpackPlugin = require('html-webpack-plugin')
// 取得相應的頁面路徑，因為之前的配置，所以是src文件夾下的pages文件夾
var PAGE_PATH = path.resolve(__dirname, '../src/pages')
// 用於做相應的merge處理
var merge = require('webpack-merge')
//多入口配置
// 通過glob模塊讀取pages文件夾下的所有對應文件夾下的js后綴文件，如果該文件存在
// 那么就作為入口處理
exports.entries = function () {
    var entryFiles = glob.sync(PAGE_PATH + '/*/*.js')
    var map = {}
    entryFiles.forEach((filePath) => {
        var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
        map[filename] = filePath
    })
    return map
}

//多頁面輸出配置
// 與上面的多頁面入口配置相同，讀取pages文件夾下的對應的html后綴文件，然后放入數組中
exports.htmlPlugin = function () {
    let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
    let arr = []
    entryHtml.forEach((filePath) => {
        let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
        let conf = {
            // 模板來源
            template: filePath,
            // 文件名稱
            filename: filename + '.html',
            // 頁面模板需要加對應的js腳本，如果不加這行則每個頁面都會引入所有的js腳本
            chunks: ['manifest', 'vendor', filename],
            inject: true
        }
        if (process.env.NODE_ENV === 'production') {
            conf = merge(conf, {
                minify: {
                    removeComments: true,
                    collapseWhitespace: true,
                    removeAttributeQuotes: true
                },
                chunksSortMode: 'dependency'
            })
        }
        arr.push(new HtmlWebpackPlugin(conf))
    })
    return arr
}
/* 這里是添加的部分 ---------------------------- 結束 */

webpack.base.conf.js 文件

module.exports = {
  /* 修改部分 ---------------- 開始 */
  entry: utils.entries(),
  /* 修改部分 ---------------- 結束 */
  output: {
    path: config.build.assetsRoot,

webpack.dev.conf.js 文件

    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    /* 注釋這個區域的文件 ------------- 開始 */
    // new HtmlWebpackPlugin({
    //   filename: 'index.html',
    //   template: 'index.html',
    //   inject: true
    // }),
    /* 注釋這個區域的文件 ------------- 結束 */
    new FriendlyErrorsPlugin()

    /* 添加 .concat(utils.htmlPlugin()) ------------------ */
  ].concat(utils.htmlPlugin())
})

webpack.prod.conf.js 文件

    new OptimizeCSSPlugin({
      cssProcessorOptions: {
        safe: true
      }
    }),
    // generate dist index.html with correct asset hash for caching.
    // you can customize output by editing /index.html
    // see https://github.com/ampedandwired/html-webpack-plugin

    /* 注釋這個區域的內容 ---------------------- 開始 */
    // new HtmlWebpackPlugin({
    //   filename: config.build.index,
    //   template: 'index.html',
    //   inject: true,
    //   minify: {
    //     removeComments: true,
    //     collapseWhitespace: true,
    //     removeAttributeQuotes: true
    //     // more options:
    //     // https://github.com/kangax/html-minifier#options-quick-reference
    //   },
    //   // necessary to consistently work with multiple chunks via CommonsChunkPlugin
    //   chunksSortMode: 'dependency'
    // }),
    /* 注釋這個區域的內容 ---------------------- 結束 */

    // split vendor js into its own file
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module, count) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
    }),
    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      chunks: ['vendor']
    }),
    // copy custom static assets
    new CopyWebpackPlugin([{
      from: path.resolve(__dirname, '../static'),
      to: config.build.assetsSubDirectory,
      ignore: ['.*']
    }])
    /* 該位置添加 .concat(utils.htmlPlugin()) ------------------- */
  ].concat(utils.htmlPlugin())
})
if (config.build.productionGzip) {
  var CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

if (config.build.bundleAnalyzerReport) {
  var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

module.exports = webpackConfig

src是我使用的工程文件，asset，components,pages分別是靜態資源文件，組件文件，頁面文件

pages是按照項目的模塊分的文件夾，每個模塊都有三個內容：vue文件，js文件，html文件。這三個文件的作用相當於做SPA單頁面應用時，根目錄的index.html頁面模板，src文件下的main.js和app.vue的功能。
原先，入口文件只有一個Main.js，但現在由於是多頁面，因此入口也沒多了，我目前就是兩個：index和cell,之后如果打包，就會在dist文件夾下生成兩個html文件：index.html和cell.html（可以參考一下單頁面應用時，打包只會生成一個Index.html）
參考：https://segmentfault.com/a/1190000011265006