vue-cli3構建多頁面應用2.0

1.0版本點這里 -> 博客：vue-cli3構建多頁面應用1.0   github：vue-cli-multipage

在1.0版本上做了以下改進：

1. 增加pages.config.js，入口js、模版html、訪問路徑、頁面標題全部都可以配置，如果訪問路徑配置成多級，也會自動打包成多級目錄

module.exports = {
  page1: {
    entry: './src/pages/page1/index.js',    //  入口js
    template: 'index.html',                 //  模版文件 默認是public里的index.html
    filename: 'page1.html',                 //  url訪問路徑
    title: 'title-page1',                   //  頁面標題
  },
  page2: {
    entry: './src/pages/page2/index.js',
    template: 'index.html',
    filename: 'page2.html',
    title: 'title-page2',
  },
  page2_1: {
    entry: './src/pages/page2/page2_1/index.js',
    template: 'index.html',
    path: '/page2',
    filename: 'page2/1.html',
    title: 'title-page2-1'
  }
}

2. vue.config.js中配置 生產環境下打包去掉console.log，靜態文件打包后放在static文件夾下

const pages = require('./pages.config')

module.exports = {
    pages,
    configureWebpack: (config) => {
        //  生產環境下去掉console.log 
        if (process.env.NODE_ENV === 'production') {
            config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
        }
    },
    lintOnSave: false,
    assetsDir: 'static',      //  打包后靜態文件夾名稱
    chainWebpack: config => {
        // 修復熱更新
        config.resolve.symlinks(true);
    },
    devServer: {
      open: true,             //  npm run serve 自動打開瀏覽器
      index: '/page1.html'    //  默認啟動頁面
    }
}

3. 增加全局插件：toast和loading

　請求觸發時自動showloading，請求成功后hideloading。多個請求時等所有請求完成后hideloading

   如果請求報錯，自動彈出toast顯示報錯內容

import axios from 'axios'
import Vue from 'vue';
import {toast, loading} from '@/plugins'

Vue.config.productionTip = false
Vue.config.devtools = process.env.NODE_ENV !== 'production';

Vue.use(toast)
Vue.use(loading)

let vm = new Vue()

axios.defaults.withCredentials = true
let http = axios.create({
  baseURL: process.env.VUE_APP_API,
  timeout: 60 * 1000
})

// 獲取CancelToken 有需要的話可以用source.cancel();取消其他請求
const CancelToken = axios.CancelToken, source = CancelToken.source();
let queueNum = 0

http.interceptors.request.use(
  (config) => {
    // 請求前顯示全局loading
    queueNum += 1
    vm.$loading.show()
    // 全局添加cancelToken
    config.cancelToken = source.token;
    return config;
  },
  (err) => {
    const error = err;
    return Promise.reject(error);
  },
)

http.interceptors.response.use(
  response => {
    // 全部請求完成后hide loading
    queueNum -= 1
    if (queueNum === 0) {
      vm.$loading.hide()
    }
    const res = response.data

    if (res.errorCode != 0) {
      vm.$toast({text: `${res.errorMsg}(${res.errorCode})`})
      return Promise.reject(response)
    } else{
      return res
    }
  },
  error => {
    if (error && error.response) {
      queueNum -= 1
      if (queueNum === 0) {
        vm.$loading.hide()
      }
      const res = error.response.data
      vm.$toast({text: `${res.errorMsg}(${res.errorCode})`})
    } else {
      vm.$loading.hide()
      vm.$toast({text: error})
    }
    return Promise.reject(error)
  }
)

export function GET(url, paramsOrData) {
  return http({ method: 'GET', url, params: paramsOrData })
}

export function POST(url, paramsOrData) {
  return http({ method: 'POST', url, data: paramsOrData })
}

export default http

4. 公共代碼的提取：引用http.js的頁面在非生產環境下都會開啟devtools，方便聯調

5. public/index.html

　設置apple-touch-icon是為了避免在safari瀏覽器報apple-touch-icon.png 404，safari瀏覽器可以將頁面添加到桌面，如果不設置apple-touch-icon，圖標默認是頁面的截圖

<!-- 禁止緩存html -->
<meta  http-equiv="pragma" content="no-cache">
<!-- safari瀏覽器添加到桌面的圖標 -->
<link rel="apple-touch-icon" href="./favicon.ico"/>

 

2.0版本 github vue-cli-multipage2

幫助到你的話請給個小星星哦🌟