vue-cli를 사용하여 다중 페이지 애플리케이션을 구현하는 방법

이 글은 주로 vue-cli를 사용하여 다중 페이지 애플리케이션을 개발하는 방법을 자세히 소개합니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 에디터와 함께 살펴보세요

이 글에서는 vue-cli를 사용하여 다중 페이지 애플리케이션을 개발하고 모든 사람과 공유하는 방법을 소개합니다. 자세한 내용은 다음과 같습니다.

수정된 웹팩 구성 파일

글로벌 구성

webpack.base .conf.js 수정

~buildwebpack.base.conf.js 열기, 항목 찾기, 여러 항목 추가

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

실행 및 컴파일 시 각 항목은 하나에 해당합니다Chunk

개발 실행 실행 환경

webpack .dev.conf.js

수정 ~buildwebpack.dev.conf.js를 열고, 플러그인에서 새 HtmlWebpackPlugin을 찾고, 그 뒤에 해당하는 여러 페이지를 추가하고, 각 페이지에 청크 구성을 추가하세요

chunks: [' app' ]의 앱은 webpack.base.conf.js

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 compile

modify config/index.js

~configindex.js를 열고 인덱스를 찾으세요. 빌드 아래: 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'),
},

Modify webpack.prod.conf.js

Open ~buildwebpack.prod.conf.js , 플러그인 아래 새 HtmlWebpackPlugin 찾기에서 그 뒤에 해당하는 여러 페이지를 추가하고 각 페이지에 대한 청크 구성을 추가합니다. HtmlWebpackPlugin의 파일 이름은 config/index.js의 해당 빌드를 참조합니다. HtmlWebpackPlugin을 플러그인에 추가하는 루프

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，不配置就会引入所有页面的资源
  }),
]

// 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(&#39;^&#39; + pathDir), &#39;&#39;) : pathname;
    entries[pathname] = [&#39;./&#39; + 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));
});

위 내용은 제가 모든 사람을 위해 편집한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 글:

JS에서 탭 스크롤 전환 구현하기

jQuery에서 EasyUI 창 사용하기

Angular4.0에서laydate.js 날짜 플러그인 사용하기

사용하기 안전하지 않은 이미지 경로에 관한 Angular4 문제

Webpack에서 Electron 애플리케이션을 구축하는 방법

위 내용은 vue-cli를 사용하여 다중 페이지 애플리케이션을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!