Heim > Web-Frontend > js-Tutorial > Hauptteil

So verwenden Sie vue-cli, um mehrseitige Anwendungsmethoden zu entwickeln

小云云
Freigeben: 2018-05-12 14:00:14
Original
3435 Leute haben es durchsucht

Wie verwende ich Vue-Cli, um mehrseitige Anwendungen zu entwickeln? In diesem Artikel wird hauptsächlich die Verwendung von vue-cli zum Entwickeln mehrseitiger Anwendungen beschrieben. Ich werde es jetzt mit Ihnen teilen und hoffe, dass es allen helfen kann.

Globale Konfiguration

Webpack.base.conf.js ändern

Öffnen~buildwebpack. base.conf.js, Eintrag suchen, mehrere Einträge hinzufügen

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

Beim Ausführen und Kompilieren entspricht jeder Eintrag einer Chunk

Dev-Entwicklungsumgebung ausführen

Webpack.dev.conf.js ändern

Öffnen Sie ~buildwebpack.dev.conf.js, suchen Sie unter Plugins nach dem neuen HtmlWebpackPlugin und fügen Sie die entsprechenden mehreren Seiten hinzu , und fügen Sie die Chunk-Konfiguration für jede Seite hinzu

Chunks: 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,不配置就会引入所有页面的资源
  })
]
Nach dem Login kopieren

festgelegt wird Build-Kompilierung ausführen

config/index.js ändern

Öffnen Sie ~configindex.js und suchen Sie den Index unter Build: path.resolve (__dirname , '../dist/index.html'), 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'),
},
Nach dem Login kopieren

Webpack.prod.conf.js ändern

Öffnen Sie ~buildwebpack.prod.conf.js, suchen Sie unter „Plugins“ nach neuem HtmlWebpackPlugin, fügen Sie danach mehrere entsprechende Seiten hinzu und fügen Sie für jede Seite eine Chunk-Konfiguration hinzu.

Der Dateiname in HtmlWebpackPlugin bezieht sich auf die entsprechende Build-in-Konfiguration/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,不配置就会引入所有页面的资源
  }),
]
Nach dem Login kopieren

Wenn es viele Seiten gibt, können Sie erwägen, eine Schleife zu verwenden, 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;
}
Nach dem Login kopieren
// webpack.base.conf.js
var pages = Object.keys(utils.getEntry(&#39;../src/views/**/*.html&#39;, &#39;../src/views/&#39;));
pages.forEach(function (pathname) {
  // https://github.com/ampedandwired/html-webpack-plugin
  var conf = {
    filename: &#39;../views/&#39; + pathname + &#39;.html&#39;, //生成的html存放路径,相对于path
    template: &#39;../src/views/&#39; + pathname + &#39;.html&#39;, //html模板路径
    inject: false,  //js插入的位置,true/&#39;head&#39;/&#39;body&#39;/false
    /*
     * 压缩这块,调用了html-minify,会导致压缩时候的很多html语法检查问题,
     * 如在html标签属性上使用{{...}}表达式,所以很多情况下并不需要在此配置压缩项,
     * 另外,UglifyJsPlugin会在压缩代码的时候连同html一起压缩。
     * 为避免压缩html,需要在html-loader上配置&#39;html?-minimize&#39;,见loaders中html-loader的配置。
     */
    // minify: { //压缩HTML文件
    //   removeComments: true, //移除HTML中的注释
    //   collapseWhitespace: false //删除空白符与换行符
    // }
  };
  if (pathname in config.entry) {
    conf.favicon = &#39;src/images/favicon.ico&#39;;
    conf.inject = &#39;body&#39;;
    conf.chunks = [&#39;vendors&#39;, pathname];
    conf.hash = true;
  }
  config.plugins.push(new HtmlWebpackPlugin(conf));
});
Nach dem Login kopieren

Derselbe Eintragseintrag kann auch verwendet werden

// webpack.base.conf.js
entry: {
  app: utils.getEntry(&#39;../src/scripts/**/*.js&#39;, &#39;../src/scripts/&#39;)
},
Nach dem Login kopieren

Verwandte Empfehlungen:

vue-cli erstellt schnell Vue-Anwendungen und implementiert die Webpack-Verpackung im Detail

vue- Der Unterschied zwischen benutzerdefinierten Pfad-Alias-Assets und statischen Ordnern in cli

Zusammenfassung relevanter Beispiele zu Vue-cli

Das obige ist der detaillierte Inhalt vonSo verwenden Sie vue-cli, um mehrseitige Anwendungsmethoden zu entwickeln. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!