Vue cli refactoring multi-page scaffolding example sharing

The officially provided project generation tool vue-cli does not support multi-page webApp, but in actual projects, we need such scaffolding. We refer to many experts’ methods. This article provides a single-page version of mine. The solution to convert scaffolding into multi-page scaffolding is for your reference. Please correct me if I have any bad points.

Preparation

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

Reconstruction process

Step 1 Change the directory structure

• step1 Create a new views folder under the src directory, and then create a new index under the views folder Folder

• #step2 Move main.js and App.vue in the src directory to the index folder in step1, and rename main.js to index.js

• step3 Move the router folder in the src directory to the index folder in step1. If you don’t use router, you can comment it out in index.js. I don’t use it because every time I use it, This page is not a single-page application, so there is no need to use the routing function

• step4 Move the index.html file in the root directory to the index folder in step1
  

Step 2 Modify the configuration file under build

In the production environment, unique js files will be packaged into pages and public js will be extracted. Everything will not be packaged into one lump. The file directory structure after packaging is also relatively clear. All modifications are in the build folder

step1 Modify utils.js and add two functions, one is used to obtain multiple entries for the page, and 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')
//多入口配置
//获取views文件夹下，每个页面下的index.js作为页面入口，故每个页面下都必须有index.js
exports.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
}
//多页面输出配置
//读取views文件夹下的对应每个页面的html后缀文件，然后放入数组中
//如果想要更深的定制或者修改，建议大家看一下CommonsChunkPlugin
//推荐一个基础的 https://segmentfault.com/q/1010000009070061
exports.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', 'vendors', 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 修改webpack.base.conf.js文件配置的入口
// entry: {
// app: './src/main.js'
// },
entry: utils.entries(),
step3 修改webpack.dev.conf.js文件的打包方法 找到下面的代码，将其注释掉：
new HtmlWebpackPlugin({
 filename: 'index.html',
 template: 'index.html',
 inject: true
}),

Add our above method after the plugins attribute value, the following is the code snippet:

// new HtmlWebpackPlugin({
 // filename: 'index.html',
 // template: 'index.html',
 // inject: true
 // }),
 new FriendlyErrorsPlugin()
 ].concat(utils.htmlPlugin())
step4 修改webpack.prod.conf.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'
}),

Add our above method after the plugins attribute value, the following is the code Snippet:

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

Configuration completed. Just start the project normally.

Related recommendations:

How to transform Vue-cli into a history mode that supports multiple pages

webpack builds react multi Page

Sample code analysis of multi-page crawler in nodejs

The above is the detailed content of Vue cli refactoring multi-page scaffolding example sharing. For more information, please follow other related articles on the PHP Chinese website!