vue-cli3 单页应用修改配置成多页应用

一、 vue.config.js配置多页入口

1. vue.config.js

官网配置参考

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

// 统一配置多页
const pages = {}
glob.sync('./src/views/**/main.js').forEach(filePath => {
  let chunk = filePath.split('./src/views/')[1].split('/main.js')[0]
  pages[chunk] = {
    entry: filePath,
    template: 'public/index.html',
    title: titles[chunk],
    chunks: ['chunk-vendors', 'chunk-common', chunk]
  }
})
module.exports = {
  // 选项...
  publicPath: process.env.NODE_ENV === 'production'
    ? '/dist/'
    : '/',
  pages
}

2. title.js设置每个页面标题

module.exports = {
  center: '嘻嘻嘻嘻',
  dipper: '啊大苏打'
}

3. 修改public/index.html中的<title></title>

<title><%= htmlWebpackPlugin.options.title %></title>

4. 注意此时项目目录是这样的：

5. 把每个单页应用下的router.js的mode改为hash模式

export default new Router({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes: []
})

6. 注意把原来的app.vue/home.vue/main.js/router.js里面引入的东西的路径修改下，因为文件目录有变化，所以某些引入的文件的路径变化了要修改。

二、参考

1. Vue CLI 3 多页应用项目的搭建
2. Vue-cli3多页面配置demo
3. vue cli3 如何配置多页面应用