在vue cli3.0中，添加了对多页面的支持，主要是在vue.config.js中添加pages配置项，pages配置项是”一个指定了 entry, template, filename, title 和 chunks 的对象 (除了 entry 之外都是可选的)；”,所以使用vue create exame创建一个单页面应用，然后改造目录结构，删掉不需要的main.js、App.vue、route.js等，添加pages文件夹，文件夹下新建页面文件夹，类似于这样：
然后添加vue.config.js，在其中加入对pages的配置:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
| let path = require('path')
let glob = require('glob')
const fs = require('fs')
function getEntry(globPath) {
let pages = {},basename, tmp, pathname;
let pathArray=glob.sync(globPath);
if(pathArray.length<=0){
return {'main':"./src/main.js"};
}
glob.sync(globPath).forEach(function(entry) {
basename = path.basename(entry, path.extname(entry));
tmp = entry.split('/').splice(-3);
pathname = basename;
let pageJs = tmp.join('/') + '/index.js'
if (!fs.existsSync(pageJs)) {
console.log(pageJs+",页面入口文件不存在。");
return;
}
let pageHtml = tmp.join('/') + '/index.html'
if (!fs.existsSync(pageHtml)) {
pageHtml = './public/index.html'
}
pages[pathname] = {
entry: pageJs,
template: pageHtml,
title: tmp[2],
filename: tmp[2]
};
});
return pages;
}
let pages = getEntry('./src/pages/**?');
module.exports = {
lintOnSave: false,
publicPath:process.env.NODE_ENV === "production"?'/':'./',
productionSourceMap: false,
pages:pages,
devServer: {
host: '',
port: 8088,
https: false,
hotOnly: false,
}
}
|
主要是添加了getEntry函数，还有就是添加了module.exports添加了pages字段，至于其他的更多的配置，自己可以继续的优化，比如chainWebpack，configureWebpack，可以根据自己的需要进行添加。然后运行yarn serve,打开localhost:8088/home即可查看到页面home了。
完整代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
| let path = require('path')
let glob = require('glob')
const fs = require('fs')
let home="";
function getEntry(globPath) {
let pages = {},basename, tmp, pathname;
let pathArray=glob.sync(globPath);
if(pathArray.length<=0){
return {'main':"./src/main.js"};
}
glob.sync(globPath).forEach(function(entry) {
basename = path.basename(entry, path.extname(entry));
tmp = entry.split('/').splice(-3);
pathname = basename;
let pageJs = tmp.join('/') + '/index.js'
if (!fs.existsSync(pageJs)) {
console.log(pageJs+",页面入口文件不存在。");
return;
}
let pageHtml = tmp.join('/') + '/index.html'
if (!fs.existsSync(pageHtml)) {
pageHtml = './public/index.html'
}
if(!home){
home="/"+tmp[2];
}
pages[pathname] = {
entry: pageJs,
template: pageHtml,
title: tmp[2],
filename: tmp[2]
};
});
return pages;
}
let pages = getEntry('./src/pages/**?');
module.exports = {
publicPath:process.env.NODE_ENV === "production"?'/':'./',
productionSourceMap: false,
pages:pages||null,
devServer: {
host: '',
port: 8088,
https: false,
hotOnly: false,
open: true,
openPage:home?home:"/"
},
chainWebpack: config => {
config.module
.rule('images')
.use('url-loader')
.loader('url-loader')
.tap(options => {
options.limit = 100
return options
})
Object.keys(pages).forEach(entryName => {
config.plugins.delete(`prefetch-${entryName}`);
});
if(process.env.NODE_ENV === "production") {
config.plugin("extract-css").tap(() => [{
path: path.join(__dirname, "./dist"),
filename: "css/[name].[contenthash:8].css"
}]);
}
},
}
|
