vue-cli3構建多頁面應用

創建一個項目hello-world

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

在src目錄下新建pages目錄，在pages下新建頁面

App.vue和main.js無用，可以刪除，文件名對應着頁面名

 

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>

根目錄下新建vue.config.js

let glob = require('glob')

//配置pages多頁面獲取當前文件夾下的html和js
function getEntry(globPath) {
    let entries = {}, tmp, htmls = {};

    // 讀取src/pages/**/底下所有的html文件
    glob.sync(globPath+'html').forEach(function(entry) {
        tmp = entry.split('/').splice(-3);
        htmls[tmp[1]] = entry
    })

    // 讀取src/pages/**/底下所有的js文件
    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', //  當前目錄沒有有html則以共用的public/index.html作為模板
            filename:tmp[1] + '.html'   //  以文件夾名稱.html作為訪問地址
        };
    });
    console.log(entries)
    return entries;
}
let htmls = getEntry('./src/pages/**/*.');

module.exports = {
    pages:htmls,
    publicPath: './',           //  解決打包之后靜態文件路徑404的問題
    outputDir: 'output',        //  打包后的文件夾名稱，默認dist
    devServer: {
        open: true,             //  npm run serve 自動打開瀏覽器
        index: '/page1.html'    //  默認啟動頁面
    }
}

 

訪問頁面

運行npm run serve就能訪問啦

index頁面：http://localhost:8080/ 或者http://localhost:8080/index.html （如果沒有index文件夾）

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

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

 

區分環境配置接口地址

在根目錄下新建.env.local .env.development  .env.prod

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

去掉eslint校驗

刪除package.json里的eslintConfig這一項

vue.config.js里配置 lintOnSave: false

本項目git地址

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

幫到你們的話請給個小星星(^_^)🌟

2.0改進版更易開發 戳👇

 　　　　　　博客  github