javascript - vuejs使用vue-cli创建项目后,添加多个html怎么处理?

查看:117
本文介绍了javascript - vuejs使用vue-cli创建项目后,添加多个html怎么处理?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

问 题

模板只有一个index.html,多个html难道都写成组件吗?
vue-cli webpack模板,添加多个html文件怎么操作呢?

解决方案

vue-cli默认创建的项目都是假设你在做单页应用,也就是仅有一个index.html作为应用入口,剩下的事情都是交由javascript动态处理的。

如果你想直接在vue-cli创建的项目骨架上简单改造成多页面风格,尝试改改build/webpack.dev.conf.js文件的plugins部分吧:

module.exports = merge(baseWebpackConfig, {
  module: {
    loaders: utils.styleLoaders()
  },
  // eval-source-map is faster for development
  devtool: '#eval-source-map',
  plugins: [
    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
    new HtmlWebpackPlugin({
      filename: '另一个.html',
      template: '另一个模板.html',
      inject: true
    })
  ]
})

这篇关于javascript - vuejs使用vue-cli创建项目后,添加多个html怎么处理?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆