Introduction to the process of reconstructing multi-page scaffolding based on vue cli-JS Tutorial-php.cn

Introduction to the process of reconstructing multi-page scaffolding based on vue cli

不言

Release： 2018-06-29 16:58:01

Original

1342 people have browsed it

This article introduces you step by step the process of reconstructing multi-page scaffolding based on vue cli. It is very good and has reference value. Friends who need it can refer to

The officially provided project generation tool vue-cli does not have the right Multi-page webApp support, but in actual projects, we need such scaffolding. After referring to the methods of many experts, here is a solution for converting my single-page scaffolding into multi-page scaffolding 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 folder under the views folder
step2 Move main.js and App.vue in the src directory to step1 index folder, and rename main.js to index.js
step3 Move the router folder in the src directory to the index folder in step1, if not used Router can be commented out in index.js, but I have not used it because each of my pages is not a single-page application and there is no need to use the routing function
step4 Change the index in the root directory Move the .html file to the index folder in step 1

Step 2 Modify the configuration file under build

In the production environment Next, we will pack unique js files into pages and extract public js files, so that 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(&#39;glob&#39;)
var HtmlWebpackPlugin = require(&#39;html-webpack-plugin&#39;)
var PAGE_PATH = path.resolve(__dirname, &#39;../src/views&#39;)
var merge = require(&#39;webpack-merge&#39;)
//多入口配置
//获取views文件夹下，每个页面下的index.js作为页面入口，故每个页面下都必须有index.js
exports.entries = function() {
 var entryFiles = glob.sync(PAGE_PATH + &#39;/*/index.js&#39;)
 var map = {}, tmp = [], pathname = &#39;&#39;;
 entryFiles.forEach((filePath) => {
 var filename = filePath.substring(filePath.lastIndexOf(&#39;\/&#39;) + 1, filePath.lastIndexOf(&#39;.&#39;))
 tmp = filePath.split(&#39;/&#39;).splice(-4)
 map[tmp[2] + &#39;/&#39; + filename] = filePath
 })
 return map
}
//多页面输出配置
//读取views文件夹下的对应每个页面的html后缀文件，然后放入数组中
//如果想要更深的定制或者修改，建议大家看一下CommonsChunkPlugin
//推荐一个基础的 https://segmentfault.com/q/1010000009070061
exports.htmlPlugin = function() {
 let entryHtml = glob.sync(PAGE_PATH + &#39;/*/*.html&#39;)
 let arr = []
 entryHtml.forEach((filePath) => {
 let jsPath = &#39;&#39;, tmp = [];
 let filename = filePath.substring(filePath.lastIndexOf(&#39;\/&#39;) + 1, filePath.lastIndexOf(&#39;.&#39;))
 tmp = filePath.split(&#39;/&#39;).splice(-4)
 jsPath = tmp[2] + &#39;/&#39; + &#39;index&#39;
 let conf = {
  template: filePath,
  filename: filename + &#39;.html&#39;,
  chunks: [&#39;manifest&#39;, &#39;vendors&#39;, jsPath],
  inject: true
 }
 if (process.env.NODE_ENV === &#39;production&#39;) {
  conf = merge(conf, {
  minify: {
   removeComments: true,
   collapseWhitespace: true,
   removeAttributeQuotes: true
  },
  chunksSortMode: &#39;dependency&#39;
  })
 }
 arr.push(new HtmlWebpackPlugin(conf))
 })
 return arr
}
step2 修改webpack.base.conf.js文件配置的入口
// entry: {
// app: &#39;./src/main.js&#39;
// },
entry: utils.entries(),
step3 修改webpack.dev.conf.js文件的打包方法 找到下面的代码，将其注释掉：
new HtmlWebpackPlugin({
 filename: &#39;index.html&#39;,
 template: &#39;index.html&#39;,
 inject: true
}),

Copy after login

Add our above method after the plugins attribute value. Here is the code snippet:

// new HtmlWebpackPlugin({
 // filename: &#39;index.html&#39;,
 // template: &#39;index.html&#39;,
 // inject: true
 // }),
 new FriendlyErrorsPlugin()
 ].concat(utils.htmlPlugin())
step4 修改webpack.prod.conf.js 找到下面的代码，注释掉：
new HtmlWebpackPlugin({
filename: config.build.index,
template: &#39;index.html&#39;,
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: &#39;dependency&#39;
}),

Copy after login

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

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

Copy after login

Configuration completed. Just start the project normally.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to solve the problem of Vue 2.0 opening the project page blank in IE11

##About Vuex@2.3 State in .0 supports function declaration

VUEJS 2.0 sub-component access/call parent component

The above is the detailed content of Introduction to the process of reconstructing multi-page scaffolding based on vue cli. For more information, please follow other related articles on the PHP Chinese website!