vue.config.js配置构建多页面应用
1、添加多页面配置
在工程根路径下(package.json同目录)添加添加vue.config.js配置文件，内容为：
const path = require('path')const glob = require('glob')function resolve (dir) { return path.join(__dirname, dir)}const PAGE_PATH = resolve('/src/modules')function getPages () { const pages = {} glob.sync(PAGE_PATH + '/*/index.js').map((filePath) => { const dirname = path.dirname(filePath) const entryName = dirname.substring(dirname.lastIndexOf(path.sep) + 1) pages[entryName] = { // page 的入口 entry: filePath, // 模板来源 template: resolve('public') + '/index.html', title: 'title', filename: `${entryName}/index.html`, // 在这个页面中包含的块，默认情况下会包含 // 提取出来的通用 chunk 和 vendor chunk。 chunks: ['chunk-vendors', 'chunk-common', entryName] } }) return pages}console.log(getPages())module.exports = { // 将构建好的文件输出到哪里 outputDir: 'dist', pages: getPages(), // 放置静态资源的地方 (js/css/img/font/...) // assetsDir: '', // 是否在保存的时候使用 `eslint-loader` 进行检查。 // 有效的值：`ture` | `false` | `"error"` // 当设置为 `"error"` 时，检查出的错误会触发编译失败。 lintOnSave: true}
2.创建多页面
按下图创建多个应用用来测试
3.运行yarn serve
如下图可以看到项目加载的信息
访问http://localhost:8083/book/#/apply 可看到如下应用
访问http://localhost:8083/demo/#/say 可看到如下应用
4.总结
在vue.config.js配置文件里构建多页面应用经常会用到，只有理解好了配置文件才能构建出多页面应用。
| 
转播
