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

Source: Internet
Author: User
Tags glob

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!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.