Preface: This article is based on vue 2.5.2, webpack 3.6.0 (the principle of configuration multi-page is similar, and the implementation methods are unique and can be customized as needed)
vue is a single page application. However, when working on large-scale projects, single pages often cannot meet our needs, so multi-page applications need to be configured.
1. Create a new vue project
vue init webpack vue_multiple_test cd vue_multiple_test npm install
2. Install glob
npm i glob --save-dev
The glob module is used to find files that meet the requirements
3. Target Structure Directory
. ├── ├── build │ ├── │ ├── │ ├── │ ├── │ ├── │ ├── │ ├── │ └── ├── config │ ├── │ ├── │ └── ├── ├── ├── ├── ├── src │ ├── assets │ │ └── │ └── pages │ ├── page1 │ │ ├── │ │ ├── │ │ └── │ └── page2 │ ├── │ ├── │ └── └── static
Among them, the pages folder is used to place pages. Page1 and page2 are used to place different pages separately, and both contain three documents by default: , , , so that when multiple people collaborate, the meaning of each file can be more clearly defined. In addition, this file can also be configured with routing.
4. utils add the following code:
const glob = require('glob')
const PAGE_PATH = (__dirname, '../src/pages')
const HtmlWebpackPlugin = require('html-webpack-plugin')
Where: PAGE_PATH is the folder path where all pages are located, pointing to the pages folder.
= function () {
/* Used to match files in the next folder of pages */
var entryFiles = (PAGE_PATH + '/*/')
var map = {}
((filePath) => {
/* The following two codes are used to retrieve the name of the next folder of the pages */
var entryPath = (filePath)
var filename = (('\/') + 1)
/* Generate corresponding key-value pairs */
map[filename] = filePath
})
return map
}
This method is used to generate multiple page entry objects. For example, in this example, the obtained entry objects are as follows:
{
page1: '/Users/work/learn/vue/vue_multiple_test/src/pages/page1/',
page2: '/Users/work/learn/vue/vue_multiple_test/src/pages/page2/',
}
Where: key is the folder name of the current page,
````value`` is the entry file name of the current page
= function () {
let entryHtml = (PAGE_PATH + '/*/')
let arr = []
((filePath) => {
var entryPath = (filePath)
var filename = (('\/') + 1)
let conf = {
template: filePath,
filename: filename + `/`,
chunks: ['manifest', 'vendor', filename],
inject: true
}
if (.NODE_ENV === 'production') {
let productionConfig = {
minify: {
removeComments: true, // Remove comments collapseWhitespace: true, // Remove whitespace and line breaks removeAttributeQuotes: true // Remove attribute quotes },
chunksSortMode: 'dependency' // Sort the introduced chunk modules }
conf = {...conf, ...productionConfig} //Combined basic configuration and production environment exclusive configuration }
(new HtmlWebpackPlugin(conf))
})
return arr
}
4. Modify the portal as follows:
```entry: ()```
5. Delete the following code
new HtmlWebpackPlugin({
filename: '',
template: '',
inject: true
})
6. Delete the following code
new HtmlWebpackPlugin({
filename: ,
template: '',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
})
7. Build results
【dev】In the development environment，implement npm run dev access: http://localhost:8080/page1/ http://localhost:8080/page2/ 即为access不同的页面 【production】In production environment，implement npm run build, The generated file directory is as follows: │ ├── dist │ ├── page1 │ │ └── │ ├── page2 │ │ └── │ └── static │ ├── css │ │ ├── page1. │ │ ├── page1. │ │ ├── page2. │ │ └── page2. │ └── js │ ├── manifest. │ ├── manifest. │ ├── page1. │ ├── page1. │ ├── page2. │ ├── page2. │ ├── vendor. │ └── vendor.
8. [Lazy Benefits] Use shell scripts to automatically build basic pages
Create a new shell script under the project file and write the following code into the script:
#!/bin/bash
# Open the pages folder and create a filecd src/pages
for file in $(ls)
do
if [ $file == $1 ];then
echo $1'The file already exists, please use another name'
exit
fi
done
mkdir $1
cd $1
# Generateecho "" >
echo '<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title></title>
</head>
<body>
<div ></div>
<!-- built files will be auto injected -->
</body>
</html>' >
# Generateecho "" >
echo '<template>
<div >
</div>
</template>
<script>
export default {
name: "App"
}
</script>
<style>
#app {}
</style>' >
# Generateecho "" >
echo "import Vue from 'vue'
import App from './App'
= false
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})" >
Then enter the following command in the project path:
bash page4
You can generate a new page named page4 in the pages folder. You can also write routes and so on through custom shell script content to achieve customization requirements.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.