1,初始化项目,新建pages目录
├── assets
│ └── logo.png
├── components
│ ├── About.vue
│ ├── HelloWorld.vue
│ └── Home.vue
├── pages
│ ├── page1
│ │ ├── index.html
│ │ ├── index.js
│ │ └── index.vue
│ └── page2
│ ├── product.html
│ ├── product.js
│ └── product.vue
└── style
└── common.less
2,根目录新建vue.config.js,它会被@vue/cli-service读取
let path = require('path')
let glob = require('glob')
//配置pages多页面获取当前文件夹下的html和js
function getEntry(globPath) {
let entries = {},
basename, tmp, pathname;
glob.sync(globPath).forEach(function(entry) {
basename = path.basename(entry, path.extname(entry));
// console.log(entry)
tmp = entry.split('/').splice(-3);
console.log(tmp)
pathname = basename; // 正确输出js和html的路径
// console.log(pathname)
entries[pathname] = {
entry: 'src/' + tmp[0] + '/' + tmp[1] + '/' + tmp[1] + '.js',
template: 'src/' + tmp[0] + '/' + tmp[1] + '/' + tmp[2],
title: tmp[2],
filename: tmp[2]
};
});
return entries;
}
let pages = getEntry('./src/pages/**?/*.html');
console.log(pages)
//配置end
module.exports = {
lintOnSave: false, //禁用eslint
baseUrl:process.env.NODE_ENV === "production"?'/':'/',
productionSourceMap: false,//关闭之后不仅能加快生产环境的打包速度,也能避免源码暴露在浏览器端:
pages,
devServer: {
index: 'index.html', //默认启动serve 打开page1的index页面
open: process.platform === 'darwin',
host: '',
port: 8088,
https: false,
hotOnly: false,
proxy: {
'/xrf/': {
target: 'http://www.baidu.com/',
changeOrigin: true,
pathRewrite: {
'^/xrf': ''
}
}
}, // 设置代理
// before: app => {}
},
chainWebpack: config => {
config.module
.rule('images')
.use('url-loader')
.loader('url-loader')
.tap(options => {
// 修改它的选项...
options.limit = 100
return options
})
//不希望预加载一些可能会用到的asyncChunk,因为会浪费掉一些带宽,而且在多页面中并不见得预加载其他入口的文件是一件好事情,于是我们通过chainWebpack进行删除
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"
}]);
}
},
configureWebpack: config => {
if(process.env.NODE_ENV === "production") {
config.output = {
publicPath: '/',
path: path.join(__dirname, "./dist"),
filename: "js/[name].[contenthash:8].js"
};
}
}
}