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

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,//  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://www.jb51.net/article/146566.htm

以上就是使用vue構建多頁面應用的示例的詳細內容，更多關於vue構建多頁面應用的資料請關注我們其它相關文章！