How to convert vue+cli single-page scaffolding into multi-page scaffolding

This time I will bring you the method of converting vue cli single-page scaffolding into multi-page scaffolding. What are the precautions for converting vue cli single-page scaffolding into multi-page scaffolding? The following is a practical case. Let’s take a look.

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 the methods of many experts. Here is a method I The solution for converting single-page scaffolding into multi-page scaffolding is for your reference. Please correct me if I have any bad points.

Prepare

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 folder under the views folder

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

step3 Move the router folder in the src directory to the index folder in step1. If you do not use router, you can comment it out in index.js. I did not use it because each of my pages is not a single-page application, so it is unnecessary. Using 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 a production environment, unique js files will be packaged into pages and public js files 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, add two functions, one is used to obtain multiple entries of 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. Here 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. Here 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.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the steps of JS manipulation of object transparency

vue routing is rendered when refreshed in history mode How to deal with page not reflected

The above is the detailed content of How to convert vue+cli single-page scaffolding into multi-page scaffolding. For more information, please follow other related articles on the PHP Chinese website!