vue配置多页面的实现方法

1.安装环境

①安装node.js 并添加入环境变量path

②安装淘宝npm镜像

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

③安装webpack

npm install webpack -g 

④安装vue-cli脚手架

npm install -g vue-cli

⑤创建项目模板 vue init wepack vue-multipage-demo

⑥cmd进入到要放项目的文件夹

⑦安装 cnpm install

2.目录结构调整

3.配置文件修改

①添加依赖 glob （返回目录中的所有子文件）

npm install glob

②修改build文件夹中的utils.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文件

function resolve (dir) {
 return path.join(__dirname, '..', dir)
}

const createlintingrule = () => ({
 test: /\.(js|vue)$/,
 loader: 'eslint-loader',
 enforce: 'pre',
 include: [resolve('src'), resolve('test')],
 options: {
 formatter: require('eslint-friendly-formatter'),
 emitwarning: !config.dev.showeslinterrorsinoverlay
 }
})

module.exports = {
 context: path.resolve(__dirname, '../'),
//注释代码开始
 // entry: {
 // app: './src/main.js'
 // },
//注释代码结束
//新增代码开始
 entry: utils.entries(),
//新增代码结束
 output: {
 path: config.build.assetsroot,
 filename: '[name].js',
 publicpath: process.env.node_env === 'production'
  ? config.build.assetspublicpath
  : config.dev.assetspublicpath
 },
 resolve: {
 extensions: ['.js', '.vue', '.json'],
 alias: {
  'vue$': 'vue/dist/vue.esm.js',
  '@': resolve('src'),
 }
 },
 module: {
 rules: [
  ...(config.dev.useeslint ? [createlintingrule()] : []),
  {
  test: /\.vue$/,
  loader: 'vue-loader',
  options: vueloaderconfig
  },
  {
  test: /\.js$/,
  loader: 'babel-loader',
  include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
  },
  {
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url-loader',
  options: {
   limit: 10000,
   name: utils.assetspath('img/[name].[hash:7].[ext]')
  }
  },
  {
  test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
  loader: 'url-loader',
  options: {
   limit: 10000,
   name: utils.assetspath('media/[name].[hash:7].[ext]')
  }
  },
  {
  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  loader: 'url-loader',
  options: {
   limit: 10000,
   name: utils.assetspath('fonts/[name].[hash:7].[ext]')
  }
  }
 ]
 },
 node: {
 // prevent webpack from injecting useless setimmediate polyfill because vue
 // source contains it (although only uses it if it's native).
 setimmediate: false,
 // prevent webpack from injecting mocks to node native modules
 // that does not make sense for the client
 dgram: 'empty',
 fs: 'empty',
 net: 'empty',
 tls: 'empty',
 child_process: 'empty'
 }
}

④修改webpack.dev.conf.js文件

 plugins: [
 new webpack.defineplugin({
  'process.env': require('../config/dev.env')
 }),
 new webpack.hotmodulereplacementplugin(),
 new webpack.namedmodulesplugin(), // hmr shows correct file names in console on update.
 new webpack.noemitonerrorsplugin(),
 // https://github.com/ampedandwired/html-webpack-plugin
 //多页面输出配置
 //注释代码开始
  // new htmlwebpackplugin({
  // filename: 'index.html',
  // template: 'index.html',
  // inject: true
  // }),
 //注释代码结束
 // copy custom static assets
 new copywebpackplugin([
  {
  from: path.resolve(__dirname, '../static'),
  to: config.dev.assetssubdirectory,
  ignore: ['.*']
  }
 ])
 //新增代码开始
 ].concat(utils.htmlplugin())
 //新增代码结束
})

⑤修改webpack.prod.conf.js文件

   'use strict'
 const path = require('path')
 const utils = require('./utils')
 const webpack = require('webpack')
 const config = require('../config')
 const merge = require('webpack-merge')
 const basewebpackconfig = require('./webpack.base.conf')
 const copywebpackplugin = require('copy-webpack-plugin')
 
 const htmlwebpackplugin = require('html-webpack-plugin')
 const extracttextplugin = require('extract-text-webpack-plugin')
 const optimizecssplugin = require('optimize-css-assets-webpack-plugin')
 const uglifyjsplugin = require('uglifyjs-webpack-plugin')
 
 const env = process.env.node_env === 'testing'
  ? require('../config/test.env')
  : require('../config/prod.env')
 
 const webpackconfig = merge(basewebpackconfig, {
  module: {
  rules: utils.styleloaders({
   sourcemap: config.build.productionsourcemap,
   extract: true,
   usepostcss: true
  })
  },
  devtool: config.build.productionsourcemap ? config.build.devtool : false,
  output: {
  path: config.build.assetsroot,
  filename: utils.assetspath('js/[name].[chunkhash].js'),
  chunkfilename: utils.assetspath('js/[id].[chunkhash].js')
  },
  plugins: [
  // http://vuejs.github.io/vue-loader/en/workflow/production.html
  new webpack.defineplugin({
   'process.env': env
  }),
  new uglifyjsplugin({
   uglifyoptions: {
   compress: {
    warnings: false
   }
   },
   sourcemap: config.build.productionsourcemap,
   parallel: true
  }),
  // extract css into its own file
  new extracttextplugin({
   filename: utils.assetspath('css/[name].[contenthash].css'),
   // setting the following option to `false` will not extract css from codesplit chunks.
   // their css will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
   // it's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
   // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
   allchunks: true,
  }),
  // compress extracted css. we are using this plugin so that possible
  // duplicated css from different components can be deduped.
  new optimizecssplugin({
   cssprocessoroptions: config.build.productionsourcemap
   ? { safe: true, map: { inline: false } }
   : { 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: process.env.node_env === 'testing'
  //  ? 'index.html'
  //  : 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'
  // }),
  //注释代码结束
  // keep module.id stable when vendor modules does not change
  new webpack.hashedmoduleidsplugin(),
  // enable scope hoisting
  new webpack.optimize.moduleconcatenationplugin(),
  // split vendor js into its own file
  new webpack.optimize.commonschunkplugin({
   name: 'vendor',
   minchunks (module) {
   // 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',
   minchunks: infinity
  }),
  // this instance extracts shared chunks from code splitted chunks and bundles them
  // in a separate chunk, similar to the vendor chunk
  // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
  new webpack.optimize.commonschunkplugin({
   name: 'app',
   async: 'vendor-async',
   children: true,
   minchunks: 3
  }),
 
  // copy custom static assets
  new copywebpackplugin([
   {
   from: path.resolve(__dirname, '../static'),
   to: config.build.assetssubdirectory,
   ignore: ['.*']
   }
  ])
  //修改代码开始 
  ].concat(utils.htmlplugin())
  //修改代码结束
 })
 
 if (config.build.productiongzip) {
  const 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) {
  const bundleanalyzerplugin = require('webpack-bundle-analyzer').bundleanalyzerplugin
  webpackconfig.plugins.push(new bundleanalyzerplugin())
 }
 
 module.exports = webpackconfig

多页面的配置完成 cnpm run dev

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。