【Vue五分钟】Vue项目的后期打包、上传、构建文档、组件测试操作

本文链接：https://blog.csdn.net/lushengshi/article/details/126839157

📚 前言

📑博客主页：@丘比特惩罚陆

💖欢迎关注：点赞收藏⭐留言✒
💬系列专栏：web前端、嵌入式、笔记专栏
🎮 加入社区：灌水乐园
🥇人生格言：选对方向，每走一步都是进步！
✒️欢迎大佬指正，一起学习！一起加油！

👏 希望大家能小手一动，帮忙点个赞！

😁资源邮箱：2237814512@qq.com

🥇 如何做到国际化

组件库默认是英文，如果需要其它语言就可以利用 LocaleProvider 组件进行配置（内置了大概有43 种语言，可随意切换）

所以我们前往 main.js 引入这个组件注册，然后前往 App.vue 使用这个组件，动态绑定一个变量 locale，导入一个中文语言包和英文语言包，在 data 里面指定 locale 的值，如此就可以修改。

不过要提供一个可以切换的配置，我们可以把语言配置项挂载到路由上，监听路由上的 locale，绑定一个函数，根据配置项决定 locale 的值，大部分组件会修改，不过日历日期组件组件是用别人的库 moment，需要对这个库做语言包的切换。引入该库，默认是加载全部的语言包（之后打包讲按需加载），我们依然路由上的配置项返回对应的语言包。

回到 header 做一个改变路由配置项切换语言的功能，可以利用 Dropdown 下拉菜单组件，记得注册，需要两个 item，然后图标改为 global，item 需要给对应的 key：zhCN 和 enUS，给菜单加一个点击事件 localeChange，接收一个 key，通过这个 key 来改变 router，直接 push 到挂载了对应 key 值配置项的路由上去。当然菜单还需要一个 selectedKeys，指向我们路由配置项上的 locale，如果没有就 zhCN。给点样式。

在分析页添加日历（体现语言效果），main.js 导入 DatePicker，然后回到分析页使用一下就行。当然，如果是自己开发的组件需要国际化的话就可以使用 Vue I18n，这个是专门的国际化插件，先安装，然后在 main.js 中引入，新建一个 locale 文件夹存放语言包，下面建一个 zhCN.js 中文的，导出一个“app.dsahboard.analysis.timeLabel”:” 时间”，尽量写长一些，不然后面命名比较困难，同样的再建一个 enUS.js，把值改成 time，回到 main.js 导入这两个语言包。use 注册 18n 先，实例化 i18n，默认语言通过 url 取到（通过一个 query-string 这个库的 parse 来解析这个 url，将字符串解析成对象），取其 locale，没有就默认中文，message 对象配置语言包。

💖 如何高效的构建打包发布

其实我们已经进行了一定打包优化方式，如 babel 中使用组件库的按需加载、路由中使用 webpackChunkName 对路由懒加载和拆包、lodash 引用的时候都是具体到方法所在文件（第一行）而不是整个拿进来（第二行）。

import debounce from "lodash/debounce";
import {debounce} from 'lodash'

但是这样子还远远不够，可以利用 cli 提供的命令来分析哪些还需要优化（npm run build -- --report）就可以生成一个打包报告（report.html），打开可以看得出来主要是 icon 下面的包和 moment 里面的语言包，echart 也引用了很多的图标。查看 github 置顶的 issue 可以找到解决方法，主要是组件按需加载（已经做了）、图标按需加载、moment 语言包按需加载。先看图标按需加载，可以看到是给 webpack 配置别名让组件库引用图标的时候都走到本地的图标配置文件中（弊端是组件库中使用的图标也需要单独配置，但是并不知道使用了什么图标，目前也只能用这种）。我们建一个 icon.js，往里面放需要的图标，再前往 vue.config.js 对别名进行配置。如此就完成了图标的按需加载，只不过不管是自己还是组件库内部使用的图标都需要在 icon.js 中配置。

//src/icons.js

//export what you need
export {
  default as SmileOutline
}
  from '@ant-design/icons/lib/outline/SmlieOutline';
export {
  default as MeOutline
}
  from '@ant-design/icons/lib/outline/MeOutline';

接下来是 moment，原理就是把 moment 引用的包都忽略掉，那么我们打包的时候 moment 的语言包就不会被打包进来了，当然使用的话就需要单独引入 moment 对应的语言包了.

接下来还有 echarts ，可以看到是整个都引入而我们只是使用了柱状图，引入核心代码/ 引擎、引入柱状图、引入 title 。那么这样子打包的时候就只会打包柱状图和配置 title 的代码。

import echarts from "echarts/lib/echarts";
import "echarts/lib/chart/bar";
import "echarts/lib/component/title";

👏 如何构建可交互的组件文档

可以看到组件库文档除了 demo 还有对应的源码提供，有三种方式实现这个代码展示。第一种方案就是直接复制一份，一份作为字符串展示出来，一份作组件，这是最不靠谱。第二种是成本比较低比较灵活，就是让组件加载两次，第一次让 vue-loader 处理，第二次选择其它 loader 如 raw-loader 把文件直接导出为字符串。不过这里需要注意，我们在 webpack 对.vue 文件都走了 vue-loader 的处理，如果想对同一文件类型走不同处理，可以直接在文件中导入的时候直接指定 loader 不让其去走 webpack 的配置。

现在要做的就是把 chart 的代码在下面显示，先安装 raw-loader 就可以直接使用了，然后我们回到 analysis 导入 chart 组件的代码字符串 charCode，然后直接{{}}就可以展示了，只不过需要高亮所以安装 vue-highlight （封装了 highlight.js 这个库让我们可以用指令的方式去使用），这个库需要在 main.js 中引入注册，这样子就能显示只不过没有高亮，所以我们去 highlight.js 找喜欢的样式库在 mian.js 引入。第三种方式是自己写 loader 然后对 markdown 进行处理，成本比较高。

import VueHighlightJS from 'vue-heghlightjs';
import 'highlight.js/styles/github.css';

Vue.use(VuehighlightJS);

import chartCode from "vue-heghlightjs"
export default {
   data() {
 return {
  chartOption:{},
chartCode
}

}

💬 如何做好组件的单元测试

对 pro 的一些重要函数做一下单元测试，首先需要配置一下 jest.config.js，修改 testMarch，但凡.spec 结尾的都走单元测试，再添加一个测试报告，这个可以在文档 Vue Test Utils 找到测试覆盖率（第一个是是否开启，这个需要看环境而不是每次都去生成，看 process.env.COVERGE 是否为 true 第二个是把哪些文件列入进来做测试分析的数据，我们可以加上 src，只要 src 下面的，并且排除掉 node 模块），到此完成测试配置。

接下来修改 eslint 的配置，环境需要打开 node 和 jest（不然关键字会标红）。
现在测试的话主要是针对 auth.js，可以运行 npm run test： unit -- --watch 让其每次更改测试用例保存都自动运行。改动一下，定义一个 currentAuth 变量，默认为[‘admin’]，并且导出这个变量，使用的话也是用这个变量来动态改变 auth。新建一个 auth.spec.js，导入 check、currentAuth，定义一个测试集 describe，开始写单测。如果可校验的权限值为空时（清空拿到的权限值），希望检测输入的是 user 的时候是为 false，admin 也是 false（因为允许通过的数组被清空了，写啥都没有用）。再测试一种校验组有 user 的情况，先清空校验组再给校验组一个 user 测试，再测试一种 admin 加 user。到此就完成了权限的单元测试，同时也完成了 pro 的骨架，还有样式、完全响应式、组件等可以一一优化。