vue腳手架改爲vue多頁面

時間 2019-12-10

標籤 vue 腳手架改爲頁面简体版

原文原文鏈接

直接進入主題：html

首先：鳴謝 JayZangwill 的解答。附上他的github,參考他的也是能夠的
連接：https://github.com/JayZangwill/vue-multipagevue

vue-cli腳手架搭建，是單頁面，但改爲多頁面，就得本身手動配置webpack

一、build/webpack.base.conf.jsgit

/*==   修改添加  開始   ==*/
const glob = require('glob')
const entry = getEntries('./src/module/**/*.js') // 得到入口js文件
/*==   修改添加  結束   ==*/

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}
/*==   修改添加  開始   ==*/
function getEntries(path) {
  let entries = {};
  glob.sync(path).forEach(entry => {
    if(/(\module\/(?:.+[^.js]))/.test(entry)) {
      entries[RegExp.$1.replace(/\/\w+\b/, '')]=entry;
    }
  })
  return entries;
}
/*==   修改添加  結束   ==*/


module.exports = {
  context: path.resolve(__dirname, '../'),
  // entry: {
  //   app: './src/main.js'
  // },
  /*==   修改添加  結束   ==*/
  entry,
  /*==   修改添加  結束   ==*/
  ………………
}

2:build/webpack.dev.conf.jsgithub

/*==   修改添加  開始   ==*/
const glob = require('glob')
const entry = getEntries('./src/module/**/*.html') // 得到入口hmtl文件
/*==   修改添加  結束   ==*/


 plugins: [
    ………………
    /*==   修改添加  開始   ==*/
    // new HtmlWebpackPlugin({
    //   filename: 'index.html',
    //   template: 'index.html',
    //   inject: true
    // }),
    /*==   修改添加  結束   ==*/

    // copy custom static assets
     ………………


module.exports = new Promise((resolve, reject) => {
      ………………
      /*==   修改添加  開始   ==*/
      for (let pathname in entry) {
        let conf = {
          filename: `${pathname}.html`,
          template: entry[pathname],
          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'
        }
        if (pathname in devWebpackConfig.entry) {
          conf.chunks = ['manifest', 'vendor', pathname];
          conf.hash = true;
        }
        devWebpackConfig.plugins.push(new HtmlWebpackPlugin(conf));
      }

      /*==   修改添加  結束   ==*/

      resolve(devWebpackConfig)
    }
  })
})


文末底部：
/*==   修改添加  開始   ==*/
function getEntries(path) {
  let entries = {};
  glob.sync(path).forEach(entry => {
    if (/(\module\/(?:.+[^.html]))/.test(entry)) {
      entries[RegExp.$1.replace(/\/\w+\b/, '')] = entry;
    }
  })
  return entries;
}
/*==   修改添加  結束   ==*/

三、build/webpack.prod.conf.jsweb

/*==   修改添加  開始   ==*/
const glob = require('glob')
const entry = getEntries('./src/module/**/*.html') // 得到入口hmtl文件
/*==   修改添加  結束   ==*/


plugins: [
   …………………………
    /*==   修改添加  開始   ==*/

    // 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'
    // }),

    /*==   修改添加  結束   ==*/
   ………………
  ]

   ………………
   /*==   修改添加  開始   ==*/
for (let pathname in entry) {
  let conf = {
    filename: `${pathname}.html`,
    template: entry[pathname],
    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'
  }
  if (pathname in webpackConfig.entry) {
    conf.chunks = ['manifest', 'vendor', pathname];
    conf.hash = true;
  }
  webpackConfig.plugins.push(new HtmlWebpackPlugin(conf));
}
/*==   修改添加  結束   ==*/
   ………………



  文本底部：
  /*==   修改添加  開始   ==*/
function getEntries(path) {
  let entries = {};
  glob.sync(path).forEach(entry => {
    if (/(\module\/(?:.+[^.html]))/.test(entry)) {
      entries[RegExp.$1.replace(/\/\w+\b/, '')] = entry;
    }
  })
  return entries;
}
/*==   修改添加  結束   ==*/