记录在 uni-app 中定义环境变量的方法

注意：文章中使用的 HBuilderX 版本为 4.24。

使用 HBX 创建的 uni-app 项目（非CLI创建），想要定义环境变量一直是一个让人非常困扰的事情。
官方的文档 关于环境变量的说明也非常暧昧不清。

通过关键词 环境变量 检索会出现5篇相关文档：

  1. #配置环境变量 - vue.config.js | uni-app官网
  2. #判断平台 - 开发环境和生产环境 | uni-app官网
  3. #环境变量 - Vue2升3指南 | uni-app官网
  4. 编辑器配置 | uni-app官网
  5. 真机运行常见问题@run | uni-app官网

所以我早期定义环境变量就是使用的第一个文档链接中使用 DefinePlugin 来定义环境变量的方式

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config
      .plugin('define')
      .tap(args => {
        args[0]['process.env'].MY_TEST = '"test"' // 注意需要多层引号包裹
        return args
      })
  }
}

注意：注意需要多层引号包裹自定义环境变量的值。

const test = process.env.MY_TEST // test

console.table(process.env)
// (索引)  值
// NODE_ENV  development
// VUE_APP_NAME  Test-Project
// VUE_APP_PLATFORM  h5
// BASE_URL  /
// MY_TEST  test

我这边在声明环境变量时，不需要使用 VUE_APP_ 这样的前缀，但是官方的示例中是有的。如果你无法在业务代码中正确获取到，可以尝试添加 VUE_APP_ 前缀（👉 VUE_APP_MY_TEST）

阅读全文

单域名多服务器的本地化部署

工作中长期维护的项目提出了一个需求：

现在项目分为 国内版 和 欧洲版。使用的同一个域名的两个子域名，分别指向部署在国内和欧洲的服务。
例如说 www.domain.com 和 eu.domain.com 这样两个应用入口。

虽然我们会在应用上标注清楚是国内版还是欧洲版。但是仍然会有不少的用户会打开错误的应用。所以想要把应用入口统一为一个。项目按照访问用户的IP所在地区自动切换到国内和欧洲的应用中。并且仍然允许用户手动切换服务器，允许跨境使用。

想了很多实现方案最后确定为在DNS上面按照IP归属做分流。通过访问用户的IP把在欧洲的用户定向到欧洲的服务，在国内的分流到国内的服务上。
实质上还是一个地区部署一整套的服务。只不过说现在应用入口的统一了，域名也是统一成 www.domain.com 一个了。

然后在对应的服务器上做 Nginx 的接口代理转发，保证可以正常访问其他地区的服务。避免因为访问系统的用户IP是固定的，在DNS上直接就被分流掉了，导致无法访问到另一个地区服务的情况。

阅读全文

ElementUI 的 Dropdown 组件键盘操控异常抛出

前段时间把项目的脚手架升级到 VueCLI 5 同步也升级了一些依赖项。所以这几天都是在自测，看看是不是有一些很明显的 BUG，以及解决一些依赖升级之后的 WARN。

在测试一个下拉菜单（Dropdown）时，发现了一个问题：使用方向键操控会抛出一个异常：
Uncaught TypeError: ele is undefined

查看控制台输出，对应异常抛出的位置是 resetTabindex 函数，在 ele.setAttribute('tabindex', '0') 执行时 ele 是 undefined，所以抛出了这个异常。

那么看函数调用链看 ele 是怎么来的。
👉 是 handleItemKeyDown 函数执行传入的 this.menuItems[nextIndex]

进入调试模式之后发现整个 menuItems 数组是空数组，并没有把我在模板中渲染的 el-dropdown-item 都包含进来。

阅读全文

在 JS 中引入并使用 SASS 变量

当前项目使用的后台管理模板的 layout 的部分是有直接引用 sass 文件暴露出来的变量在业务代码中使用的。
比如说:

也没有怎么了解过看这个魔法使用的来源文章 中也只说是 webpack 支持了 CSS Modules 的功能，可以直接使用 :export 功能。

只需要在 .scss 中使用 :export { } 把需要暴露的变量暴露出来就可以在 JS 中使用 import 导入了

:export {
  menuText: $menuText;
  menuActiveText: $menuActiveText;
  subMenuActiveText: $subMenuActiveText;
  menuBg: $menuBg;
  menuHover: $menuHover;
  subMenuBg: $subMenuBg;
  subMenuHover: $subMenuHover;
  sideBarWidth: $sideBarWidth;
}
阅读全文