vue-cli3构建多页面应用2.0

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

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 的全部内容， 来源链接： utcz.com/z/378633.html

回到顶部