webpackコンパイル多ページvueプロジェクトの配置問題について詳しく説明してください。

この文章は主にwebpackが複数ページのvueプロジェクトをコンパイルする構成問題を紹介します。
一般的に、vueプロジェクトを構築する手順は以下の通りです。
1,nodejs環境をインストールします。
2,vue-cliをインストールします

cnpm install vue-cli -g 

3、vueプロジェクトを構築する

vue init webpack-simple vue-cli-multipage-demo 

4、設置項目依存パッケージ

cnpm install 

5、開発環境でこのプロジェクトを実行する：

npm run dev 

上記のステップを通して簡単なvueプロジェクトの開発環境は基本的に構築され、次の作業はコードを記入することです。
最近は先端コードの再構成をしている時に問題が発見されました。この足場を使って構築されたプロジェクトは私の需要を満足できません。実はこの需要は私達のvueの初心に反するものです。vueは単一ページアプリケーション（SPA）を開発しています。ここで彼が複数ページの効果を実現する必要があります。どういう意味ですか？例えば、私達はウェブページを開発する時、時には接続をクリックして、ブラウザは新しく1つのtabページを開けて私達の内容を表示しにきて、この時実は多くのページの情況が現れて、新しく開いたこのページは実はすでに私達の前のページの面に属しませんでした。しかし、この時新しく開いたページはすでにホームページから離れています。
vue-cli足場で構築したプロジェクトのwebpackプロファイルは単一ページのアプリケーション開発に対応しています。彼は入り口ファイルしかありません。そして最後は一つのページだけを生産します。どのようにして私の需要を満たすことができて、webpackに同時に複数のページに便利にさせますか？実はやはり比較的に簡単で、webpackを少し改造するだけで十分です。
まず、私達はbuildファイルの下のutils.jsファイルの家にファイルパスを取得する方法を追加したいです。この方法は対象ファイルをオブジェクトの形に解析します。
utils.js

var glob = require("glob");//                
exports.getEntry = function(globPath) {
 var entries = {},
 basename, tmp, pathname;
 if (typeof (globPath) != "object") {
 globPath = [globPath]
 }
 globPath.forEach((itemPath) => {
 glob.sync(itemPath).forEach(function (entry) {
  basename = path.basename(entry, path.extname(entry));
  if (entry.split('/').length > 4) {
  tmp = entry.split('/').splice(-3);
  pathname = tmp.splice(0, 1) + '/' + basename; //     js html   
  entries[pathname] = entry;
  } else {
  entries[basename] = entry;
  }
 });
 });
 return entries;
}

それからwenpack.base.com nf.jsファイルを修正して、入り口のファイルを修正します。もとのファイルは単一のファイルです。今はシングルファイルの入り口を複数のファイルの入り口に変えなければなりません。
webpack.dev.co.nf.js

var path = require('path')
var config = require('../config')
var utils = require('./utils')
var projectRoot = path.resolve(__dirname, '../')
var glob = require('glob');
var entries = utils.getEntry(['./src/module/**/*.js']); //         js  
var env = process.env.NODE_ENV
// various preprocessor loaders added to vue-loader at the end of this file
var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)
var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)
var useCssSourceMap = cssSourceMapDev || cssSourceMapProd
module.exports = {
 entry: entries,//                    
 output: {
 path: config.build.assetsRoot,
 publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
 filename: '[name].js'
 }
 ...
}

以下はwebpack.dev、conf.jsファイルを修正します。ここでは主に元の設定のトップページを修正します。ここでは複数のページを配置する必要があります。
webpack.dev.co.nf.js

var path = require('path');
var config = require('../config')
var webpack = require('webpack')
var merge = require('webpack-merge')
var utils = require('./utils')
var baseWebpackConfig = require('./webpack.base.conf')
var HtmlWebpackPlugin = require('html-webpack-plugin')
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
 baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})
module.exports = merge(baseWebpackConfig, {
 ...
});
//  
var pages =utils.getEntry(['./src/module/*.html','./src/module/**/*.html']);
for (var pathname in pages) {
 //      html  ，     
 var conf = {
 filename: pathname + '.html',
 template: pages[pathname], //     
 inject: true,    // js    
 chunksSortMode: 'dependency'
 };
 if (pathname in module.exports.entry) {
 conf.chunks = ['manifest', 'vendor', pathname];
 conf.hash = true;
 }
 module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}

ここで、new Html WebpackPluginのconfオブジェクトを変更したら、元の構成は単一であり、現在はサイクルパスオブジェクトを通じて複数のhtml配置オブジェクトを生成する。
上記の構成により、npm run devを実行すると、webpackは同時に複数のページを便利にして、前のwenpack.base.com nf.jsに配置されたjsファイルを対応するhtmlページに挿入することができます。
この時はプロジェクトnpm run devを実行してから、違うページにアクセスできます。ここで注意したいのですが、複数のページを管理する必要があるので、srcの下でカタログを作成して、別々のページを置くべきです。このようにプロジェクトの構造はより鮮明に見えて、メンテナンスに便利です。
これは私が書いたデモの住所です。興味がある人は引いてみてもいいです。vue-cli-multi-pageを見てください。
実行後にアクセスhttp://localhost:8080/module/index.htmlをクリックして、新しいページを開きます。
上のような配置は開発環境だけで、最終生産環境のプロファイルwebpack.prod.com.jsも修正が必要です。そうすると、生産パッケージの時に同時にdistで複数のhtmlファイルを生成することができます。
webpack.prod.com nf：

var path = require('path')
var config = require('../config')
var utils = require('./utils')
var webpack = require('webpack')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var CleanPlugin = require('clean-webpack-plugin')//webpack  ，        
var env = config.build.env
var webpackConfig = merge(baseWebpackConfig, {
...
}
//        ， webpack.dev.conf.js       
module.exports = webpackConfig
var pages =utils.getEntry(['./src/module/**/*.html']);
for (var pathname in pages) {
 //      html  ，     
 var conf = {
 filename: pathname + '.html',//   html       
 template: pages[pathname], //                    html   。                  ，    html, jade, ejs, hbs,   ，       ，           ，          loader，
 inject: true,    //     。       true, body, head, false.true:   ，script    html    body   ,body:  true,head:script      head    ,false:       js   ，          html   
 // necessary to consistently work with multiple chunks via CommonsChunkPlugin
 chunksSortMode: 'dependency'
 };
 if (pathname in module.exports.entry) {
 conf.chunks = ['manifest', 'vendor', pathname];
 conf.hash = true;
 }
 module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}

以上がevue-cliの足場を使ってvue多ページ開発の解決策です。皆さんの学習に役に立つように、私達を応援してください。