在网上看了很多例子,但是自己试总不成功,终于在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