使用vue构建多页面应用的示例

先了解一些单页面和多页面的区别

为什么用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')
  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 + '

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())
})

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())
})
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构建多页面应用的资料请关注考高分网其它相关文章！