vue-cli3 配置多页

在网上看了很多例子，但是自己试总不成功，终于在github 中 下了一个可用，然后自己测试了下，可用，这里做个笔记

1、在src 下新建pages目录，pages下具体的页面建具体的文件夹，然后添加app.js 和app.vue，这里app.js 等效于单页框架下的入口文件main.js，组件 app.vue 等效于单页下的app.vue，vue通过入口文件解析app.vue 并替换模板文件index.html

编写title

修改模板页的title，添加<%= htmlWebpackPlugin.options.title %>

安装glob依赖

编写配置文件 vue.config.js

添加

const titles = require('./title.js')

const glob = require('glob')

const pages = {}

 

glob.sync('./src/pages/**/app.js').forEach(path => {

console.log(path);

const chunk = path.split('./src/pages/')[1].split('/app.js')[0];

console.log(chunk);

pages[chunk] = {

entry: path,

template: 'public/index.html',

title: titles[chunk],

chunks: ['chunk-vendors', 'chunk-common', chunk]

}

})

models中添加pages