12. 富文本编辑器 echarts 合并两个对象的方法（lodash） nprogress 进度条 去除vue项目中的 console 的命令 vue项目打包

富文本编辑器 npm 地址

image

echarts ecahrts 地址

// 导入 echarts 数据可视化
let echarts = require('echarts')

// 看官网文档查看详细的使用步骤

合并两个对象的方法（lodash）lodash 地址：

// 先导入lodash 这个第三方的库文件   合并两个对象
import _  from 'lodash' 

const result = _.merge(res.data, this.options)

nprogress 进度条 nprogress 进度条 地址

// 先安装 nprogress 进度条
npm install --save nprogress

// 在main.js中写如下代码

// 导入 nprogress 进度条
// 导入 NProgress 包对应的JS和CSS
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// axios 请求拦截器   添加请求头 Authorization 字段 才能访问有权限的接口
axios.interceptors.request.use(config => {
  // 在发起请求时展示进度条
  NProgress.start();

  // console.log(config)  下面是配置请求头的参数 当有token值时才能访问一些api接口
  config.headers.Authorization = window.sessionStorage.getItem('token')
  // 在最后必须 return config
  return config
})

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

  // 在最后必须 return config
  return config
})

babel-plugin-transform-remove-console 去除vue项目中的 console 的命令

// 先安装 transform-remove-console
npm install babel-plugin-transform-remove-console --save-dev

// 在 babel.config.js 文件中输入

// 这是项目发布阶段需要用到的 babel 插件
const prodPlugins = []
// 判断开发模式  是发布阶段就移除 console 的命令
if (process.env.NODE_ENV === 'production') {
  prodPlugins.push('transform-remove-console')
}

module.exports = {
  // 删除项目中所有的 console 的输出
  "plugins": [
      // 发布产品时候的插件数组  ... 是展开符 让 prodPlugins 里面的数据项依次展开
      ...prodPlugins
  ]

}

vue 项目运行 及 打包

// 运行 vue 项目
npm run serve

// 打包 vue 项目
npm run build

// npm run build 运行完成后会生成一个打包好的 dist 文件夹

vue 项目生成打包报告

image

vue 项目生成 两个main.js 文件 一个为开发模式，一个为发布模式

image

image

// 现将 main.js 修改为 main-dev.js  并且 复制 main.js 里面的代码 再新建一个 main-prod.js 文件

// 在 vue.config.js 文件里面 添加如下代码
module.exports = {
    devServer: {
        port: 8888,
        open: true
    },
    chainWebpack: config => {
        // 发布模式
        config.when(process.env.NODE_ENV === 'production', config => {
            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')
        })
    }
}