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

帮助到你的话请给个小星星哦

巴特西

vue-cli3构建多页面应用2.0

最新文章

热门文章