项目优化--添加进度条--移除项目中的console语句

最新推荐文章于 2024-06-21 14:34:59 发布

MissQ_coffee

最新推荐文章于 2024-06-21 14:34:59 发布

阅读量161

点赞数

分类专栏： Vue后台管理项目文章标签： vue.js javascript

本文链接：https://blog.csdn.net/MissQ_coffee/article/details/105047385

版权

Vue后台管理项目专栏收录该内容

7 篇文章 1 订阅

订阅专栏

本文介绍了项目优化的两个策略：添加进度条和移除console语句。针对Vue CLI项目，通过nprogress实现进度条，并配置请求拦截器。同时，通过babel-plugin-transform-remove-console移除console.log，但需根据不同模式调整配置。

摘要由CSDN通过智能技术生成

项目优化策略

给项目顶部加进度条
1.对于vue-cli项目直接在可视化面板查找nprogress运行依赖，对于其他项目使用:npm install --save nprogress命令安装。
2.导入nprogress包对应的JS和CSS

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

3.配置请求拦截器和响应拦截器

//在request拦截器中展示进度条 NProgress.start()
axios.interceptors.request.use(config => {
  NProgress.start();
  return config;

// 在response拦截器中隐藏进度条 NProgress.done()
axios.interceptors.response.use(config => {
  NProgress.done();
  return config;
});

移除项目中的console语句

vue可视化面板安装依赖或者命令安装

babel-plugin-transform-remove-console

npm install babel-plugin-transform-remove-console --save-dev

在babel.config.js文件中添加如下：

 plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ],
    'transform-remove-console' //注意
  ]

其他项目中可在.babelrc文件中进行配置：

{
  "plugins": ["transform-remove-console"]
}

注意注意注意
以上方法全局设置后不利于在测试开发模式下使用，因此需要区分开发模式和发布模式，代码如下：

// 这是项目发布阶段需要用到的babel插件
const prodPlugins = []
if (process.env.NODE_ENV === 'production') {
  prodPlugins.push('transform-remove-console');
}
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ],
    // 发布产品时的插件数组
    ...prodPlugins
  ]
}