Vue-cli3 Single-page application Modified the configuration to multi-page application

A,vue.config.jsConfigure the multi-page entry

1. vue.config.js

Official website Configuration Reference

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 = {// options... publicPath: process.env.NODE_ENV ==='production'
    ? '/dist/'
    : '/',
  pages
}
Copy the code

2. title.jsSet each page title

module.exports = {
  center: 'Hee hee Hee hee',
  dipper: 'Ah, baking soda.'
}
Copy the code

3. Modifypublic/index.htmlIn the<title></title>

<title><%= htmlWebpackPlugin.options.title %></title>
Copy the code

4. Note that the project directory looks like this:

5. Apply each page to the followingrouter.jsthemodeInstead ofhashmodel

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

6. Note that the original app. Vue/home. Vue/main js/router. Js introduced contents path changes, because the file directory have change, so some changes into the path of the files to be modified.

Second, the reference

1. Vue CLI 3 multi-page application project construction
2. Vue-cli3 Multi-page Demo configuration
3. How to configure multi-page application for Vue CLI3