Create a project Hello World

vue create hello-world
cd hello-world
npm run serve

Create a new page directory in src directory and a new page in pages directory

App.vue and main.js are useless and can be deleted. The file name corresponds to the page name.

index.js

import Vue from 'vue'
import App from './index.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

index.vue

<template>
  <div id="app">
    <h1>page2</h1>
  </div>
</template>

<script>

export default {
  name: 'page2'
}
</script>

<style>
</style>

Create a new vue.config.js in the root directory

let glob = require('glob')

//To configure pages Get the html and js
function getEntry(globPath) {
    let entries = {}, tmp, htmls = {};

    // read src/pages/**/All the html files below
    glob.sync(globPath+'html').forEach(function(entry) {
        tmp = entry.split('/').splice(-3);
        htmls[tmp[1]] = entry
    })

    // Read src/pages/**/Everything down there js file
    glob.sync(globPath+'js').forEach(function(entry) {
        tmp = entry.split('/').splice(-3);
        entries[tmp[1]] = {
            entry,
            template: htmls[tmp[1]] ? htmls[tmp[1]] : 'index.html', //  The current directory does not have any html Common public/index.html As template
            filename:tmp[1] + '.html'   //  By folder name.html As access address
        };
    });
    console.log(entries)
    return entries;
}
let htmls = getEntry('./src/pages/**/*.');

module.exports = {
    pages:htmls,
    publicPath: './',           //  Solve the problem of static file path 404 after packaging
    outputDir: 'output',        //  Packed folder name, default dist
    devServer: {
        open: true,             //  npm run serve Open browser automatically
        index: '/page1.html'    //  Default launch page
    }
}

Access page

Run npm run serve to access

index page: http://localhost:8080/ Or http://localhost:8080/index.html (if there is no index folder)

page1: http://localhost:8080/page1.html

page2: http://localhost:8080/page2.html

Distinguished environment configuration interface address

Create a new. Env.local. Env.development. env.prod in the root directory

VUE_APP_API_ENV='https://xxx.rdtest.com'

Remove the eslint check

Delete the eslintConfig item in package.json.

Configure lintonsave in vue.config.js: false

git address of the project

https://github.com/AinneShen/vue-cli-multiPage

If you can help me, please give me a little star.