Vue-cli multi-page project practice page 1/2, vue-cli2 page

Vue-cli multi-page project practice page 1/2, vue-cli2 page

This article introduces vue-cli multi-page engineering practices and shares them with you as follows:

Src directory structure

Because it is a custom setting, the directory structure under src needs to be fixed, and the conventions are greater than the configuration.

Src directory structure:

Src/components/modules/# multi-page index/# index single page index.html main. js # entry file page1/index.html main. js group/page2/index.html main. js

Configuration in build

Utils. js added:

// Match fileslet glob = require ('glob');/*** obtain a specific file in the pan path using globPath */exports. getEntities = function (path) {let entities = {}; glob. sync (path ). forEach (function (entity) {let moduleName = entity. split ('/'). slice (-2,-1); entities [moduleName] = entity}); // eg: {main :'. /src/module/index/main. js', test :'. /src/module/group/test/main. js '} return entities ;};

Modify Input and Output in webpack. base. conf. js:

Module. exports = {// retrieve the entry file entry through traversal: utils. getEntities (". /src/modules/**/main. js "),... plugins: []};/***** generate <module>/index.html */let utils = require ('. /utils ') let pages = utils. getEntities (". /src/modules/**/index.html "); for (let page in pages) {let filename =" index.html "; if (page! = 'Index') {filename = page + "/index.html";} module. exports. plugins. push (new HtmlWebpackPlugin ({filename: filename, template: pages current 1/2 page12. Next page