vue-cli3 build multi-page applications

Create a hello-world project

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

New pages directory under the src directory, create a new page in the pages

App.vue and main.js useless, you can delete the file name corresponds to the name of the page

 

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>

New vue.config.js the root directory

glob = the require the let ( 'glob' ) 

// configuration page for multiple pages in the current folder html and JS 
function getEntry (globpath) { 
    the let entries It =} {, tmp, HTMLs = {}; 

    // read src / pages / ** / html files under all 
    glob.sync (globpath + 'html') forEach (. function (entry) { 
        tmp = entry.split ( '/') splice (-3. ); 
        HTMLs [tmp [ . 1]] = entry 
    }) 

    // read src / pages / ** / js files under all 
    glob.sync (globpath + 'js'). forEach ( function (entry) { 
        tmp = entry.split ( '/'). splice ( -3 ); 
        entries It [tmp [ . 1]] = {
            entry, 
            Template: HTMLs [tmp [ . 1]] HTMLs [tmp [. 1]]:? 'index.html', //   current directory has no places common html public / index.html as a template 
            filename: tmp [1] + '.html'    //   to the folder name as the access address .html 
        }; 
    }); 
    the console.log (entries It) 
    return entries It; 
} 
the let HTMLs = getEntry ( './ the src / Pages / ** / *.' ) ; 

module.exports = { 
    Pages: HTMLs, 
    publicPath: './',            //   solve the problem then packaged file path 404 of the static 
    outputDir: 'Output',         //   files packetized folder name, the default dist 
    devserver: { 
        Open:to true ,              //   npm RUN serve to automatically open a browser 
        index: '/page1.html'     //   default start page 
    } 
}

 

Access page

Run npm run serve will be able to access it

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

 

Distinguish environment configuration interface address

New .env.local .env.development .env.prod in the root directory

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

Check remove eslint

Delete this one package.json in the eslintConfig

vue.config.js in configuration lintOnSave: false

This project addresses git

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

Give me help you, then little star (^_^)