vue-cli 를 어떻게 사용 하여 여러 페이지 의 응용 을 개발 하 는 지 상세 하 게 설명 합 니 다.

본 고 는 vue-cli 를 어떻게 사용 하여 여러 페이지 의 응용 을 개발 하고 여러분 에 게 공유 하 는 지 를 소개 합 니 다.구체 적 으로 다음 과 같 습 니 다.
수 정 된 웹 팩 프로필
전역 설정
webpack.base.conf.js 수정
~\build\\webpack.base.conf.js 를 열 고 entry 를 찾 아 다 중 입 구 를 추가 합 니 다.

entry: {
  app: './src/main.js',
  app2: './src/main2.js',
  app3: './src/main3.js',
},

실행,컴 파일 할 때 모든 입구 가 하나 에 대응 합 니 다Chunkrun dev 개발 환경
webpack.dev.conf.js 수정
~\build\\webpack.dev.conf.js 를 열 고 plugins 에서 new Html WebpackPlugin 을 찾 아 그 뒤에 해당 하 는 여러 페이지 를 추가 하고 각 페이지 에 Chunk 설정 을 추가 합 니 다.
chunks:['app']의 app 은 webpack.base.conf.js 에서 entry 가 설정 한 입구 파일 에 대응 합 니 다.

plugins:[
  // https://github.com/ampedandwired/html-webpack-plugin
  //   :index.html → app.js
  new HtmlWebpackPlugin({
   filename: 'index.html',//   html
   template: 'index.html',//  html
   inject: true,//      
   chunks: ['app']//     Chunk，              
  }),
  //   :index2.html → app2.js
  new HtmlWebpackPlugin({
   filename: 'index2.html',//   html
   template: 'index2.html',//  html
   inject: true,//      
   chunks: ['app2']//     Chunk，              
  }),
  //   :index3.html → app3.js
  new HtmlWebpackPlugin({
   filename: 'index3.html',//   html
   template: 'index3.html',//  html
   inject: true,//      
   chunks: ['app3']//     Chunk，              
  })
]

run build 컴 파일
config/index.js 수정
~\config\\index.js 를 열 고 build 의 index:path.resolve(dirname,'.../dist/index.html'),그 다음 에 여러 페이지 를 추가 합 니 다.

build: {
  index: path.resolve(__dirname, '../dist/index.html'),
  index2: path.resolve(__dirname, '../dist/index2.html'),
  index3: path.resolve(__dirname, '../dist/index3.html'),
},

webpack.prod.conf.js 수정
~\build\\webpack.prod.conf.js 를 열 고 plugins 에서 new Html WebpackPlugin 을 찾 아 그 뒤에 해당 하 는 여러 페이지 를 추가 하고 각 페이지 에 Chunk 설정 을 추가 합 니 다.
HtmlWebpackPlugin 의 filename 은 config/index.js 에 대응 하 는 build 를 참조 합 니 다.

plugins: [
  //   :index.html → app.js
  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',
    chunks: ['manifest','vendor','app']//     Chunk，              
  }),
  //   :index2.html → app2.js
  new HtmlWebpackPlugin({
    filename: config.build.index2,
    template: 'index2.html',
    inject: true,
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
    },
    chunksSortMode: 'dependency',
    chunks: ['manifest','vendor','app2']//     Chunk，              
  }),
  //   :index3.html → app3.js
  new HtmlWebpackPlugin({
    filename: config.build.index3,
    template: 'index3.html',
    inject: true,
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
    },
    chunksSortMode: 'dependency',
    chunks: ['manifest','vendor','app3']//     Chunk，              
  }),
]

페이지 가 많 으 면 HtmlWebpackPlugin 을 plugins 에 추가 하 는 순환 을 고려 할 수 있 습 니 다.

// utils.js
exports.getEntry = function(globPath, pathDir) {
  var files = glob.sync(globPath);
  var entries = {},
    entry, dirname, basename, pathname, extname;

  for (var i = 0; i < files.length; i++) {
    entry = files[i];
    dirname = path.dirname(entry);
    extname = path.extname(entry);
    basename = path.basename(entry, extname);
    pathname = path.join(dirname, basename);
    pathname = pathDir ? pathname.replace(new RegExp('^' + pathDir), '') : pathname;
    entries[pathname] = ['./' + entry];
  }
  return entries;
}

// webpack.base.conf.js
var pages = Object.keys(utils.getEntry('../src/views/**/*.html', '../src/views/'));
pages.forEach(function (pathname) {
  // https://github.com/ampedandwired/html-webpack-plugin
  var conf = {
    filename: '../views/' + pathname + '.html', //   html    ，   path
    template: '../src/views/' + pathname + '.html', //html    
    inject: false,  //js     ，true/'head'/'body'/false
    /*
     *     ，   html-minify，          html      ，
     *   html       {{...}}   ，                  ，
     *   ，UglifyJsPlugin           html    。
     *      html，   html-loader   'html?-minimize'， loaders html-loader   。
     */
    // minify: { //  HTML  
    //   removeComments: true, //  HTML    
    //   collapseWhitespace: false //         
    // }
  };
  if (pathname in config.entry) {
    conf.favicon = 'src/images/favicon.ico';
    conf.inject = 'body';
    conf.chunks = ['vendors', pathname];
    conf.hash = true;
  }
  config.plugins.push(new HtmlWebpackPlugin(conf));
});

같은 입구 entry 도 사용 할 수 있 습 니 다.

// webpack.base.conf.js
entry: {
  app: utils.getEntry('../src/scripts/**/*.js', '../src/scripts/')
},

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.