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

猜你喜欢

转载自blog.csdn.net/chpswg/article/details/94733560