Detailed description of the process of constructing multi-page scaffolding Based on vue cli, vuecli

Detailed description of the process of constructing multi-page scaffolding Based on vue cli, vuecli

The official project generation tool vue-cli does not support multi-page webapps. However, in actual projects, we need such scaffolding and refer to many great methods, here we provide a solution for converting single-page scaffolding into multi-page scaffolding for your reference. Please correct me if it is not good.

Preparation

Use vue-cli to generate a single page project scaffold you need, and then we will start our transformation project.

Reconstruction process

Step 1. Change the directory structure

• Step 1 create the views folder under the src directory, and then create the index folder under the views folder.
• Step 2 move main. js and App. vue under the src directory to the index folder in step 1, and rename main. js to index. js.
• Step 3 move the router folder under the src directory to the index folder in step 1. If you do not use the router folder, you can use the index again. I did not use it because each page is not a single page application and does not need to use the routing function.
• Step 4 move the index.html file under the root directory to the index folder in step 1.
  

Step 2 modify the configuration file under build

In the production environment, a unique js file is packaged on pages, and common js files are extracted. After packaging, the file directory structure is clear. All the modifications are in the build folder.

Step 1 modify utils. js and add two functions. One is used to obtain multiple page entries, the other is used to input the packaged page and inject js:

Var glob = require ('glob') var HtmlWebpackPlugin = require ('html-webpack-plugin') var PAGE_PATH = path. resolve (_ dirname ,'.. /src/views ') var merge = require ('webpack-merge') // configure multiple entries // obtain the index under each page in the views folder. js is used as the page entry, so each page must have an index. jsexports. entries = function () {var entryFiles = glob. sync (PAGE_PATH + '/*/index. js ') var map ={}, tmp = [], pathname = ''; entryFiles. forEach (filePath) => {var filename = filePath. substring (filePath. lastIndexOf ('\/') + 1, filePath. lastIndexOf ('. ') tmp = filePath. split ('/'). splice (-4) map [tmp [2] + '/' + filename] = filePath }) return map} // multi-page output configuration // read the html suffix file corresponding to each page under the views folder, and then put it into the array // If You Want To further customize or modify, I suggest you take a look at CommonsChunkPlugin // recommend a basic https://segmentfault.com/q/1010000009070061exports.htmlPlugin = function () {let entryHtml = glob. sync (PAGE_PATH + '/*/*. html ') let arr = [] entryHtml. forEach (filePath) => {let jsPath = '', tmp = []; let filename = filePath. substring (filePath. lastIndexOf ('\/') + 1, filePath. lastIndexOf ('. ') tmp = filePath. split ('/'). splice (-4) jsPath = tmp [2] + '/' + 'index' let conf = {template: filePath, filename: filename + '.html ', chunks: ['manifest ', 'vendor', jsPath], inject: true} if (process. env. NODE_ENV = 'production ') {conf = merge (conf, {minify: {removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true}, chunksSortMode: 'dependency '})} arr. push (new HtmlWebpackPlugin (conf)}) return arr} step2 modify webpack. base. conf. js file configuration entry // entry: {// app :'. /src/main. js' //}, entry: utils. entries (), step 3 modify webpack. dev. conf. find the following code for packaging js files and comment out: new HtmlWebpackPlugin ({filename: 'index.html ', template: 'index.html', inject: true }),

Add the above method to the property value of plugins. The following is a code snippet:

// New HtmlWebpackPlugin ({// filename: 'index.html ', // template: 'index.html', // inject: true //}), new FriendlyErrorsPlugin () pai.concat(utils.html Plugin ()) step 4 modify webpack. prod. conf. js find the following code and comment out: new HtmlWebpackPlugin ({filename: config. build. index, template: 'index.html ', inject: true, minify: {removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true // more options: // define necessary to consistently work with multiple chunks via CommonsChunkPluginchunksSortMode: 'dependency '}),

Add the above method to the property value of plugins. The following is a code snippet:

new CopyWebpackPlugin([{  from: path.resolve(__dirname, '../static'),  to: config.build.assetsSubDirectory,  ignore: ['.*'] }]) ].concat(utils.htmlPlugin())

Configuration complete. Start the project normally.

Summary

The above is a detailed description of the vue cli-Based Multi-page scaffolding reconstruction process. I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!