使用vue怎么實現配置多頁面

這篇文章將為大家詳細講解有關使用vue怎么實現配置多頁面，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網頁中相應的地方，所以越來越多的前端開發者使用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

關于使用vue怎么實現配置多頁面就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。