vue配置多页面的实现方法


            1.安装环境

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



②安装淘宝NPM镜像







$ npm install -g cnpm --registry=http://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(),

 // http://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: http://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 http://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:

  //  // http://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: http://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

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