Vue项目优化

一、通过nprogress给页面增加进度条效果

nprogress官方文档

1.安装依赖

npm install --save nprogress

2.导入js及css

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

3.使用

在axios拦截器中添加如下方法

• 发起请求前调用 start()

• 服务器相应后调用 done()

// request拦截器
service.interceptors.request.use(config => {
  // 发起请求前，给页面添加进度条效果
  NProgress.start()
  ......
})

// respone拦截器
service.interceptors.response.use(response => {
  // 服务端相应后，进度条效果消失
  NProgress.done()
  ......
})

二、eslint和编译项目冲突

1.问题

保存会格式化代码，有些格式会vue编译时会报错，本质上也是代码规则配置过于严苛导致。通常是prettier插件代码风格和自己配置的eslint风格冲突

2.解决

放松部分规则配置即可

我的项目采用standard vue代码风格

.eslintrc.js文件部分内容如下:

extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],

可以新增 .prettierrc文件，并加入以下内容

{
    // 希望 eslint不检查分号这一项，
    "semi": false,
    // 使用单引号替代双引号
    "singleQuote": true,
    // 一行代码的长度
    "printwidth":200
    
}

三、在执行build命令期间移除所有的console

1.开发依赖：

babel-plugin-transform-remove-console

注意：
加入该配置会导致所有环境的console输出都被移除，但是开发环境还是要调试测试的，因此只是生产环境移除这些console语句就可以了。

所以需要获取生产环境节点：

process.env.NODE_ENV = productiong

2.实战操作：

1.安装依赖 注意不是运行依赖 选开发依赖

2.在 babel.config.js文件中加入以下配置
实例：

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

  ]
}

四、通过 vue. config. js修改 webpack的默认配置

通过vue-cli 3.0工具生成的项目，默认隐藏了所有 webpack的配置项，目的是为了屏蔽项目的配置过程，让程序员把工作的重心，放到具体功能和业务逻辑的实现上。

如果有修改webpack默认配置的需求，可以在项目根目录中，按需创建 vue.config.js这个配置文件，从而对项目的打包发布过程做自定义的配置(具体配置参考官网

vue.config.js 参考：

module.exports = {
  // 配置打包入口
  chainWebpack: config => {
    // 生产环境配置
    config.when(process.env.NODE_ENV === 'production', config => {
      // 链式编程  先获取名为'app'的默认打包入口，然后清除掉，接着再添加自定义的入口文件
      config.entry('app').clear().add('./src/main-prod.js')

      // 通过externals节点加载外部CDN资源
      config.set('externals', {
        vue: 'Vue',
        vuex: 'Vuex',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_',
        echarts: 'echarts',
        nprogress: 'NProgress',
        'vue-quill-editor': 'VueQuillEditor'
      })
    })
    // 开发环境配置
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js')
    })
  }
}

五、为开发模式与发布模式指定不同的打包入口

默认情况下，vue项目的开发模式与发布模式，共用同一个打包的入口文件(即src/main.js)。

为了将项目的开发过程与发布过程分离，我们可以为两种模式，各自指定打包的入口文件，即

1. 开发模式的入口文件为 src/main-dev.js
2. 生产模式的入口文件为 src/main-prod.js

1.Webpack打包配置知识点

configureWebpack和chainWebpack在vue.config.js导出的配置对象中，新增 configurWebpack 或 chainWebpack节点，来自定义 webpack的打包配置

在这里，configureWebpack和chainWebpack的作用相同，唯一的区别就是它们修改 webpack配置的方式不同

1. chainWebpack通过链式编程的形式，来修改默认的 webpack配置
2. configureWebpack通过操作对象的形式，来修改默认的 webpack配置

两者具体的使用差异。可参考官网

2.实战：

1.配置开发/生成环境的入口文件

• 将main.js文件更名为：main-dev.js表示开发环境入口文件
• 并在同级目录下复制一份，并命名为main-prod.js，表示生产环境入口文件

2.新建vue.config.js文件，添加以下内容：

chainWebpack方式打包

// chainWebpack方式打包
module.exports = {
  // 配置打包入口
  chainWebpack: config => {
    // 生产环境配置
    config.when(process.env.NODE_ENV === 'production', config => {
      // 链式编程  先获取名为'app'的默认打包入口，然后清除掉，接着再添加自定义的入口文件
      config.entry('app').clear().add('./src/main-prod.js')
    })
    // 开发环境配置
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js')
    })
  }
}