vuecli4搭建vue3项目中，编译和打包的进度条插件webpackbar的正确使用

最新推荐文章于 2023-07-02 20:15:31 发布

风清云淡_A

最新推荐文章于 2023-07-02 20:15:31 发布

阅读量709

点赞数

分类专栏：编辑器 vue2/vue3 文章标签：前端

本文链接：https://blog.csdn.net/qq_27702739/article/details/127572908

版权

vue2/vue3 同时被 2 个专栏收录

86 篇文章 3 订阅

订阅专栏

编辑器

8 篇文章 0 订阅

订阅专栏

比较出名的前端管理系统都有使用过能可视化显示的进度条效果，很美观，也能明显提示进度信息，减缓开发人员的等待焦虑，那是怎么做的呢？

webpackbar 插件安装

yarn add -D webpackbar

我的项目里面npm安装一直报错，改用了yarn就可以运行了，可能是版本的冲突问题

npm i -D webpackbar

{
"dependencies": {
    "ant-design-vue": "^3.2.13",
    "core-js": "^3.6.5",
    "vue": "^3.2.41"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.19",
    "@vue/cli-plugin-eslint": "~4.5.19",
    "@vue/cli-service": "~4.5.19",
    "@vue/compiler-sfc": "^3.2.41",
    "axios": "^1.1.3",
    "axios-mock-adapter": "^1.21.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "9.6.0",
    "webpackbar": "^5.0.2"
  },
}

vue.config.js配置

const path = require('path')
const WebpackBar = require('webpackbar')
function resolve(dir) {
    return path.resolve(__dirname, dir)
}
module.exports = {
    chainWebpack: (config) => {
        /* 配置别名 */
        config.resolve.alias.set('@', resolve('src'))
            .set('components', path.join(__dirname, 'src/components'))
            .set('mixins', path.join(__dirname, 'src/mixins'))
            .set('store', path.join(__dirname, 'src/store')).end()
        /* 配置插件 */
        config
            .plugin('webpackbar')
            .use(WebpackBar).tap(args => {
                console.log(args, 'args')
                return [...args, {
                    color: 'red', name: "我的后台系统"
                }]
            })
    },
    devServer: {
        port: 3030
    }
}