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', },
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,不配置就会引入所有页面的资源 }) ]
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'), },
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,不配置就会引入所有页面的资源 }), ]
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('^' + 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)); });
Derselbe Eintragseintrag kann auch verwendet werden
// webpack.base.conf.js entry: { app: utils.getEntry('../src/scripts/**/*.js', '../src/scripts/') },
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!