So verwenden Sie vue-cli zum Implementieren mehrseitiger Anwendungen

In diesem Artikel wird hauptsächlich ausführlich vorgestellt, wie man mit vue-cli mehrseitige Anwendungen entwickelt. Der Herausgeber findet es recht gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor und werfen wir einen Blick darauf.

In diesem Artikel wird erläutert, wie Sie mit vue-cli mehrseitige Anwendungen entwickeln und mit allen teilen können. Die Details lauten wie folgt:

Modifiziertes Webpack Konfigurationsdatei

Globale Konfiguration

Webpack.base.conf.js ändern

Öffnen Sie ~buildwebpack.base.conf. js, Eintrag suchen, weiteren Eintrag hinzufügen

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

Beim Ausführen und Kompilieren entspricht jeder Eintrag einer Chunk

Dev-Entwicklungsumgebung ausführen

Ändern Sie webpack.dev.conf .js

Öffnen Sie ~buildwebpack.dev.conf.js, suchen Sie unter Plugins nach neuem HtmlWebpackPlugin, fügen Sie danach entsprechende mehrere Seiten hinzu und fügen Sie Chunk-Konfiguration

Chunks für hinzu Jede Seite: Die App in ['app'] entspricht der Eintragsdatei, die durch den Eintrag in 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

festgelegt wird config/index .js ändern

Öffnen Sie ~configindex.js, suchen Sie den Index unter Build: path.resolve(__dirname, '../dist/index.html') und fügen Sie danach mehrere Seiten hinzu

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 ändern

Öffnen Sie ~buildwebpack.prod.conf.js, suchen Sie unter Plugins nach einem neuen HtmlWebpackPlugin, fügen Sie die entsprechenden mehreren Seiten danach hinzu und Fügen Sie jede Seite hinzu, um jeder Seite eine Chunk-Konfiguration hinzuzufügen

Der Dateiname in HtmlWebpackPlugin bezieht sich auf den entsprechenden Build in config/index.js

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

Wenn es viele Seiten gibt, können Sie die Verwendung einer Schleife in Betracht ziehen um HtmlWebpackPlugin zu Plugins hinzuzufügen

// 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));
});

Derselbe Eintrag kann auch verwendet werden

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

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie den Label-Scrolling-Wechsel in JS

So verwenden Sie das EasyUI-Fenster in jQuery

So verwenden Sie das Datums-Plug-in vonlaydate.js in Angular4.0

Probleme mit unsicheren Bildpfaden bei der Verwendung von Angular4

So erstellen Sie Electron-Anwendungen in Webpack

Das obige ist der detaillierte Inhalt vonSo verwenden Sie vue-cli zum Implementieren mehrseitiger Anwendungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!