在第一篇文章中，我提到，项目的自动部署是放在 now.sh 上，以方便预览。但出于用户体验和速度的考虑，我们选择了国内的七牛云作为页面的承载。不过，七牛毕竟是一个对象存储，而不是一个专业的静态托管业务，在使用上遇到了一些坑，还好经过努力都得到了解决。

七牛的 Bucket 名规则

和绝大多数的云计算厂商一样，七牛也使用了 Bucket 来作为存储的单元。

由于这个项目要挂 Linux.cn 的二级域名，于是我便让老王创建了一个 Bucket，绑定域名，并通过七牛自带的权限控制机制，将其分发给我，让我来使用。

在我的个人控制台看到了这个 Bucket：

发现问题

我通过控制台，手动上传了生成的文件后，确认没有问题，就将相应的功能写入到 Github Action 的 配置文件（配置文件点这里）中，实现自动的部署。但在部署过程中，屡次报错，不知道为什么。在开启了 DEBUG 信息后发现，竟然是 Bucket 不存在（点我查看 CI 的构建信息）。

解决问题

和老王沟通以后才发现，是七牛的 Bucket 名机制的问题。

在七牛中进行权限分配的时候，会要求你为 Bucket 设定一个别名，而且名字和已有的名字必须是不同的，这导致我看到的 Bucket 的名和老王创建的 Bucket 名是不相同的。

而我使用的 AK 和 SK 又是让老王设置在 Github 后台的 Secrets，Bucket 则是我自己设置的，所以就出现了问题。具体来说，是下面这张图。

由于我填写的 Bucket 是我自己看到的，而不是老王那边真正的 Bucket 名称，导致在上传的时候，无法找到 Bucket。在将 Bucket 名称替换为老王那边看到的 Bucket 名称后，问题得到解决。

七牛不支持 Vue Router 的 History 模式

在第二篇文章中，我提到了引入了 Vue 的 History 模式来优化体验。但是，七牛本身作为一个存储系统，没有转发的功能，也就导致其没有办法很好的支持 Vue History 模式。

在经过一番研究后，找到了解决方案，就是将 index 页面，同时作为 404 页面，这样就可以实现从某种意义上的将所有请求都转发给 Index 页面。

你需要做的，就是将 index.html 复制一份，并重命名为 errno-404，并和其他文件一同上传，这样用户请求一些不存在的文件时，会自动将请求转发给 errno-404， 又因为这个文件的内容是索引文件的内容，所以就可以实现了请求的转发。

相关代码的实现，你可以在 https://github.com/LCTT/tldr.linux.cn/blob/master/.github/workflows/nodejs.yml 这里找到。

总结

在这篇文章中，介绍了七牛的 Bucket 问题，以及 Vue Router History 模式在七牛下的解决方案。

在完成了产品的基础开发以后，接下来需要进行一些周边的工作，这些周边工具将会帮助下一步优化产品。

为什么要加应用统计和 Crash 收集

不少开发者在开发的时候，很少会意识到需要添加应用统计和 Crash 收集。但对于一个合格的应用来说，这些是必须的。

• 应用统计：应用统计会在后续进行产品迭代的时候给予数据的支持，让能够明确为什么要更新、要更新什么以及为什么这么做。
• Crash 收集：人无完人，很难开发出一个完美的应用，就随时有可能会出现应用报错的情况。出现报错以后由于用户的水平不同，有效的反馈其实很少。Crash 收集则可以帮助收集必要的 Crash 信息，从而在后续开发的过程中，有针对性的修复 Bug。

应该使用哪些工具？

在应用统计领域，可选项非常多，大部分人使用的是 Google Analytics ，不过由于这个产品的面向用户主要是国内的用户，因此我更倾向选择加载速度更快的产品，最终我选择的是来自腾讯的移动应用分析（MTA），腾讯的移动应用分析中，提供了 HTML5 产品的接入，因此可以完成 TLDR 的统计。

在 Crash 收集方面，大家用的比较普遍的是 Sentry.io ，不过因为 Linux 中国并没有足够多的产品业务需要使用 Sentry 来收集 Crash ，因此，一直使用的是官网的免费使用版本。同样因为网络加载速度的原因，选择使用了国内的竞品 —— FunDebug。

接入工具

腾讯移动应用分析

腾讯移动应用分析的接入并不复杂，首先，你需要登陆其官网，创建一个 HTML5 应用。

并在创建完成后，根据你自己的需要配置相应的能力，这里我开启了所有的数据统计，用以支持后续的产品迭代决策。

配置完成后，你会获得具体的统计的代码，接下来就可以进行接入。

一个比较简单的方法是直接将代码复制，并粘贴到 public/index.html 中，从而实现统计。不过，这样嵌入会导致如果需要自定义统计时，会无法通过 ESLint 的规则，因此我选择了第二种方式，使用 Vue 插件的方式接入。

使用 Vue 插件接入时，需要使用 mars-mta 这个包。

先使用 npm 安装依赖，然后在 main.js 中加入相应的统计代码，就可以实现自动的统计。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify';

// 以下为新增代码
import Mars from 'mars-mta'
Vue.use(Mars, {
    open: true, // 开关,若为false,则不会发出上报
    config: {
      sid: '500710182', // 必填，统计用的appid
      cid: '500710183', // 如果开启自定义事件，此项目为必填，否则不填
      autoReport: 1, // 是否开启自动上报(1:init完成则上报一次,0:使用pgv方法才上报)
      senseHash: 1, // hash锚点是否进入url统计
      senseQuery: 1, // url参数是否进入url统计
      performanceMonitor: 1, // 是否开启性能监控
    }
})
// 以上为新增代码

new Vue({
  router,
  vuetify,
  render: h => h(App),
  beforeCreate: async function(){
        const auth = this.$tcb.auth({ persistence: 'local' });
        await auth.signInAnonymously();
  }
}).$mount('#app')

在我的代码中，配置了 sid 和 cid ，这些信息你都需要在腾讯 MTA 的应用管理后台获取。

而下方的配置，则根据你自己的实际需求选择开启即可。

对应的提交：https://github.com/LCTT/tldr.linux.cn/commit/61821aff4bf75fda3e81d96c6cd34a51efd00773

FunDebug

Fundebug 是我之前在开发小程序的时候用过的 Crash 收集应用。这次刚好也用上了。

因为预算的问题，这里我使用的是免费版本，有几个 tab 是看不到的，但是基本的 Debug 也是够用了。

Fundebug 的安装也很简单， 访问 https://www.fundebug.com/ ，注册账号， 并创建一个项目，你会获得一个 API Key，后续你可以使用这个 API Key 来初始化你的项目。

执行如下命令来安装依赖：

npm install fundebug-javascript fundebug-vue --save

并在 main.js 中添加如下代码（将 API-KEY 替换为你自己的 API KEY）并保存，就可以引入 Fundebug 来进行 Crash 收集了。

import * as fundebug from "fundebug-javascript";
import fundebugVue from "fundebug-vue";
fundebug.init({
    apikey: "API-KEY"
})
fundebugVue(fundebug, Vue);

对应的提交：https://github.com/LCTT/tldr.linux.cn/commit/225ca9d38e80eb55defac6383f5b9c228bdab6fe

优化

在开发的过程中经常会出现 Error，这个是难以避免的。在开启了 Crash 收集以后，这些 ERROR 也会被收集到 Fundebug 上，这样会浪费每个月 3000 条的免费额度，因此，需要一个方法在开发环境不启用这些拓展。类似的，也不希望 MTA 统计本地开发的 Page View ，会影响到后续的数据分析。因此，我使用了一些方法来避开这个问题。

if (process.env.NODE_ENV === 'production') {
    Vue.use(Mars, {
      open: true, // 开关,若为false,则不会发出上报
      config: {
        sid: 'xxx', // 必填，统计用的appid
      }
  })
  fundebug.apikey = "xxx"
  fundebugVue(fundebug, Vue);
}

通过将引用统计的代码包裹在环境的判断代码中，可以实现在渲染的时候，只有生产环境才会渲染出相应的统计代码，从而实现了在开发环境不调用 fundebug 和 mta 统计，避免了开发环境的数据干扰。

对应的提交：https://github.com/LCTT/tldr.linux.cn/commit/62f87b51fabd7c25cd905560157a546fd62babf2

总结

在这篇文章中，介绍了两个服务，分别是用于统计的腾讯移动分析 MTA 和用于做 Crash 收集的 fundebug，介绍了应该如何在 Vue 应用中接入这两种服务。此外，还根据实际的需求，优化了两个统计的位置，确保产品在开发环境不会工作，从而避免了影响到我们统计数据的准确性。

这篇文章涉及到的代码你都可以在 https://github.com/LCTT/tldr.linux.cn/blob/master/src/main.js 看到。

介绍

在完成了界面的实现后，接下来可以开始进行和云开发相关的数据对接。完成数据对接后，应用基础就打好了，接下来的就是发布上线以及一些小的功能的加入。

配置

在进行相关的配置调用的时候，你需要先登录腾讯云控制台，进行一些配置。使用你的小程序账号登录腾讯云，并在其中找到“云开发”产品。进入到“产品控制台”。

在“产品控制台”中找到你的环境，点击进入“详情页”：

在环境“详情页面”选择“用户管理”->“登录设置”->“匿名登录”：

启用匿名登录。

云开发的数据查询目前必须登录后才可以查询，因为希望给用户提供的是免登录的解决方案，因此，必须开通匿名登录，确保可以进行数据查询。

由于需要在网页中调用相应的函数，因此，也需要在同一个页面的 WEB 安全域名中添加应用的上线域名（本地调试用的 localhost 无需添加）。

为应用程序添加匿名登录的逻辑

此部分代码位置：https://github.com/LCTT/tldr.linux.cn/blob/master/src/main.js

由于希望用户可以打开网页就可以查询数据，因此，必须在用户无感的情况下，完成匿名登录逻辑。

根据对 Vue 生命周期的预研，将相应的逻辑放在了 beforeCreate 中，确保在应用初始化完成后，就可以自动完成匿名登录。

具体实现代码如下：

// main.js
new Vue({
  router,
  vuetify,
  render: h => h(App),
  beforeCreate: function(){                   // 新增匿名登陆逻辑
        const auth = this.$tcb.auth();        // 新增匿名登陆逻辑
        auth.signInAnonymously();             // 新增匿名登陆逻辑
  }                                           // 新增匿名登陆逻辑
}).$mount('#app')

加入完成后，你可以使用云开发的数据库等命令，来完成相应的数据库调用，验证自己的调用是否正常。

在这里需要注意，由于 Vue 默认的 ESLint 规则限制，默认是无法在 Vue 项目代码中使用 console.log 的，你需要使用一些命令来跳过相应的检查 只需要在你需要打印变量的前一行加入 // eslint-disable-next-line 就可以避免对应的检查了。

调用数据

此部分代码位置：https://github.com/LCTT/tldr.linux.cn/blob/master/src/views/Result.vue

完成初始化后，就需要完成相应的数据调用，这里不再针对每一个进行讲解，选择一个例子来说明。

const db = this.$tcb.database();
const cmd = db.collection('command');
if(this.id){ // 这里的 id 是 props 传入的参数，为命令对应的 doc id
    cmd.doc(this.id).get().then(res => {
      this.command = res.data
    })
    }else{
    cmd.where({
      name: this.$route.params.cmd // 命令可以从 Route 中获取，但实际场景下，因为开启了 `props: true`，也可以直接从 props 中获取。
    }).limit(1).get().then(res => {
      this.command = res.data[0]
    }).catch((err) => {
      alert("命令查询出错，请联系我们")
      // eslint-disable-next-line
      console.error(err)
    })
}

在这段代码中，首先是前期挂载的 $tcb 中抽取 database() 对象，并基于 database() 对象构建 collection() 对象。 然后就是使用 collection() 对象进行查询。

由于这里涉及到不同的页面逻辑，使用了一个 if 来判断数据。上下两种分别是获取单个数据和使用多个数据的方法。获取到数据以后，将数据更新，同步到 Vue 的 Data 中，完成相应的逻辑的调用。

云开发登录的坑

此部分代码位置：https://github.com/LCTT/tldr.linux.cn/blob/master/src/main.js

由于为用户提供的是快速查询功能，因此希望用户无论何时都是无感进行查询的。但实际测试的时候，发现用户如果直接通过命令行登录的时候，会导致报错。根据控制台返回的信息来看，是用户登录状态尚未完成，就进行了数据查询。

通过查询云开发的文档，发现云开发的 auth 对象在登录的时候，可以传入一个 persistence 参数来控制身份信息的持久化。

由于默认使用的是会话 ，所以导致用户的登录态丢失。为了确保应用的状态正常进行，将 persistence 设置为 local，确保应用在一次登录后可以将用户登录状态下放到用户的存储 中，这样可以避免用户总是会遭遇请求失败的问题。

// main.js
new Vue({
  router,
  vuetify,
  render: h => h(App),
  beforeCreate: async function(){
        const auth = this.$tcb.auth({ persistence: 'local' });
        await auth.signInAnonymously();
  }
}).$mount('#app')

总结

在实际开发中，如果你需要通过云开发的 Web SDK 调用相应的数据，则需要先行开启云开发的匿名登录并配置 Web 安全域名；在数据调用的部分和在小程序端调用云开发没有太大的区别；并通过设置 presistence 设置搞定了登录状态丢失的问题。

工作量分析

在我们进行这部分开发的时候，接下来我们需要进行相应的功能安排和分类。

简单看来，我需要开发 3 个页面：

1. 首页：首页负责用户默认访问。
2. 列表页：列表页面则是在搜索过程中，如果有多个结果，则进入到列表页面。如果有单个结果，则应该进入到详情页面。
3. 结果页：结果页负责显示命令的具体的翻译结果。

根据实际的工作拆分组件的化，我需要有一个 Layout 组件来负责整体的页面的环境渲染。但是，考虑到组件的复用，于是决定将首页的 Title 进行优化，使首页和详情页保持一致。

在新版的布局情况下，我就可以将顶部的的 title 和底部的 Link 放在最外侧的组件中。

创建 Router & Page

在思考情况后，接下来我们来创建 Router 和 Page。首先，删除 views 下的 About.vue（因为这个页面我们不需要）。然后创建 List.vue 和 Result.vue ，用作后续的开发准备。

创建完成后，修改 router/index.js 中的 routes 部分：

const routes = [
  {
    path: '/',
    name: 'home',
    component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
  },
  {
    path: '/list/:cmd',
    name: 'list',
    component: () => import(/* webpackChunkName: "list" */ '../views/List.vue')
  },
  {
    path: '/cmd/:cmd',
    name: 'command',
    component: () => import(/* webpackChunkName: "cmd" */ '../views/Result.vue')
  }
]

完成定义后，我们就可以通过形如 https://tldr.linux.cn/list/ls和https://tldr.linux.cn/cmd/ls 这样的方式来访问具体的命令了。

定义页面

接下来需要编写 Home、List 和 Result 这三个页面。由于这三个页面在内容方面没有太多的可以借鉴的点，所以我们更多关注于使用页面中 <script> 的部分。

<template>
  <div class="home">
        <v-text-field
        v-model="cmd"
        @keydown="onKeyDown"
        autofocus
        ></v-text-field>        
  </div>
</template>

<script>
export default {
  name: 'home',
  data:function(){
    return {
      cmd:""
    }
  },
  methods:{
    onKeyDown: function(e)  {
     
    }
  },
  computed:{
    isLoaded:function(){
        return !this.loaded
    }
  }
}
</script>

上述代码是我在三个页面几乎都会使用到的结构，删除其中的一些无用的代码以后，基本上在每个页面都可以看到。这里我重点说一下其中的一些比较特殊的用法。

首先第一个是在 v-text-field 上加入的 @keydown="onKeyDown" 这个绑定，这个绑定将会帮助实现用户点击回车以后，自动触发事件。这样在用户输入完命令后，按下回车就自动执行后续的操作，而不需要再移动鼠标指针去点击按钮启动搜索。

其次，在 v-text-field 上加入了autofocus ，来实现进入页面后，自动为输入框加入focus，从而实现页面加载完成后，用户就可以输入命令。

这样的一些配置，可以让用户的体验做到最好。

除此之外，我还用到了 computed ，来做数据调整，确保我可以控制内容。

一些小的特性的点

使用骨架图来优化体验

由于我们的应用在列表页面和详情页面存在数据的查询时间，为了让应用在加载的时候，不会因为加载中而退出页面，我加入了 v-skeleton-loader 组件，这样用户在数据查询的时候，看骨架图来缓解用户的焦虑。

在组件层面，我配置了 v-if 来做显示的控制，并将 type 设置为 card,article,card,article 来实现多样化的组件加载支持。

 <v-skeleton-loader
    v-if="isLoaded"
    type="card,article,card,article"
    min-height="800"
    ></v-skeleton-loader>

总结

在这一部分中，借助 Vue 的 method 、onkeydown 和 computed 实现了页面基本逻辑的构建。并借助 Vuetify 的一些基础组件来构建页面。

在这一部分，我想告诉大家的更多是在 UI 的部分，我们在做的时候不仅仅需要考虑的是界面，更多还需要考虑在 UX 侧体验的优化，组件库提供给我们的配置项目，可以优化产品体验。