Lesson 01 · 运行时配置

接口打到了错的服务，第一个该看哪里

用 GameBox 里唯一重要的那个 Pinia store，一次把 Pinia 学到够用。

先说人话：什么叫「打到了错的服务」

这个工具不是只连一个后端，它同时连着好几套。 每次点按钮发请求，代码都要现场算两件事：

「接口打到了错的服务」= 这两个值算错了任意一个。 请求本身会成功，界面也不报错，但它作用在了错误的对象上。

最难受的版本：你在 GM 里选了「测试版」，写了条游戏公告点发布， 结果它出现在正式服全体玩家眼前。没有报错、没有红字，你甚至以为自己成功了。 ——这类「静默地做对了错误的事」，是本工具最贵的一类故障，所以第一课讲它。

界面上就有这个开关

ENV: {
  VITE_API_BASEPATH_DEV: '测试版',
  VITE_API_BASEPATH: '正式版'
}

GM 那几个页面顶部的「测试版 / 正式版」下拉，切换时干这些事：

const GameENVData = getStorage('GameENV')
if (val == 'VITE_API_BASEPATH_DEV') {
  GameENVData['VITE_API_GAMENOTICE_PCODE'] = gameEnv.ENV.VITE_API_BASE_PCODE + '_dev'
} else {
  GameENVData['VITE_API_GAMENOTICE_PCODE'] = gameEnv.ENV.VITE_API_BASE_PCODE
}
GameENVData['VITE_API_GAMENOTICE_PATH'] = gameEnv.getEnvKey(val)
setStorage('GameENV', GameENVData)

「选测试版」的实现方式，就是给 pCode 拼一个 _dev 后缀。 记住这一点，后面那个「pCode 含 _dev」的判断就不再是边缘情况了 ——它是「测试版」这个开关本身。

为什么第一课是它

你的 mission 有四个目标，这一条链路同时压着其中三个：

而且它对你特别友好：这是纯数据流，没有一行模板语法。 你的 TypeScript / Node 经验在这里 100% 有效。

先把你已经会的东西接上

第三行是这一课最重要的一句话。import.meta.env 在打包完成的那一刻就凝固成常量了， 它不可能知道你登录的是哪一款游戏。所以本项目必须在它之上再叠一层运行时配置 ——这层就是今天的主角。

Pinia 最小知识集：读懂 GameEvn

没听说过 Pinia？先花五分钟读 课 02 · Pinia 是什么 ——它从你熟悉的 Node 模块级单例讲起，讲完再回来这一节。

整个 store 只有 38 行。先看骨架：

export const useGameEvn = defineStore('game', {
  state: () => {
    return {
      cos: null,
      ENV: {} as any
    }
  },
  getters: {},
  actions: {
    init(ENV_ARG: any) { … },
    getEnvKey(key: string) {
      return this.ENV[key] || null
    },
    setEnvKey(key: string, value: any) {
      this.ENV[key] = value
    },
    clean() { … }
  }
})

三件事就够你读懂本项目所有 store：

1. defineStore('game', {...}) —— 第一个参数是全局唯一 id， 不是变量名。注意这里 id 叫 'game'、文件叫 GameEvn.ts、 函数叫 useGameEvn——三个名字都不一样，搜索时三个都得试。
2. state 必须是个函数，返回初始状态。是函数而不是对象， 因为每个 Pinia 实例都要拿到一份全新的、互不干扰的状态 （Pinia · State）。
3. actions 里的 this 就是 store： this.ENV[key] = value 直接改状态，不需要 mutation、不需要 dispatch （Pinia · Actions）。

第四件事：为什么有个 useGameEvnWithOut

export const useGameEvnWithOut = () => {
  return useGameEvn(store)
}

在 .vue 组件里可以直接 useGameEvn()，因为 Vue 知道「当前活跃的应用实例」。 但 src/config/axios/service.ts 是个普通 TS 模块，没有组件上下文——这时必须 把 pinia 实例当参数显式传进去，否则会抛 getActivePinia was called with no active Pinia （Pinia · 在组件外使用 store）。

那个 store 就是 createPinia() 的返回值：

const store = createPinia()
export const setupStore = (app: App<Element>) => { app.use(store) }
export { store }

四层链路：一个值从 .env 走到请求头

覆盖动作长这样，注意它是写 store 的 state，不是写 .env：

gameEnv.ENV.VITE_SVN_URL = svn_url || gameEnv.ENV.VITE_SVN_URL
gameEnv.ENV.VITE_SVN_USER = svn_account
gameEnv.ENV.VITE_SVN_PASSWORD = svn_password
gameEnv.ENV.VITE_JENKINS_URL = jenkins_url || gameEnv.ENV.VITE_JENKINS_URL

还有一步容易漏：.env 里 Jenkins job 名带着字面量 channel 这个词， 登录时被替换成实际渠道号。

const replaceChannelInUrls = (url: string) => url.replace('channel', channel)

所以你在 .env 里看到的 job 名不是真正提交给 Jenkins 的那个。 这条到第 5 课讲发布栈时会再用到。

关键分叉：service.ts 有两个读取来源

这是本课最需要记住的一段。发请求时 baseURL 怎么定：

function getRouteConfig(): RouteConfig | null {
  const currentRouter = sessionStorage.getItem('currentRouter')
  return currentRouter ? ROUTE_CONFIG_MAP[currentRouter] : null
}

function getBaseURL(pcode: string): string {
  const routeConfig = getRouteConfig()
  if (pcode.includes('_dev')) {
    return 'http://common-gm-460qntest.3975app.com/n1000y-api/'   // 硬编码测试域名
  }
  return routeConfig
    ? getStorage('GameENV')[routeConfig.pathKey]                  // ① sessionStorage
    : gameEnv.getEnvKey('VITE_API_PATH') || '…prod…/n1000y-api/'  // ② Pinia 内存
}

读懂这段，你就知道「接口打错服务」只可能是下面四个原因之一：

currentRouter 不等于地址栏

全项目只有这几处写它：

把它理解成接口环境开关，不是页面位置记录。地址栏没动、它却变了，是正常的。

这个实现值不值得模仿

检索练习

不要往回翻。先从记忆里取，取不出来也点一个——取的动作本身才是练习。

去真机上验证（约 15 分钟）

光读会产生「我懂了」的错觉。下面每一步都要在跑起来的应用里做完 ——真机是本课程唯一的证据来源。

cd ~/Projects/works/gameboxclient
npm run dev

• 登录后打开 DevTools → Application → Session Storage，找到 GameENV。 确认它的形状是 {"type":"Object","value":{…}}——外面包了一层，因为 useStorage 会连类型一起存（src/hooks/web/useStorage.ts:8-11）。 只记键名和结构，不要复制里面的账号、密码、token。
• Console 敲 sessionStorage.currentRouter，记下当前值。切一个标签页再敲一次， 确认它跟着变（写入点 src/layout/TagsView.vue:71）。
• 打开 GM 弹窗，再敲一次。看它是不是变成了 /GM——尽管地址栏根本没变。 这一条亲手看到，你就永远不会再把它当成路由记录了。
• 看一次「静默地做对了错误的事」是怎么发生的：打开 GM → 游戏公告， 把顶部下拉在「测试版 / 正式版」之间切一次，每切一次就在 Application 面板看 GameENV 里的 VITE_API_GAMENOTICE_PCODE—— 确认「测试版」时它多了个 _dev 尾巴。只切换、只观察，不要点发布。
• 顺手验证一个我从代码里读出来、但没跑过的推论： GameNotice/index.vue:118 把 VITE_API_GAMENOTICE_PATH 设成了 gm_url_dev，可 service.ts:88-89 一看到 pCode 含 _dev 就直接 return 硬编码域名——那第 118 行设的地址，在「测试版」下是不是根本没被用上？ 在 Network 面板看实际请求域名是不是 common-gm-460qntest.3975app.com。 如果是，这就是一条该记进坏味道清单的发现，告诉我，我补进课里。
• 在 src/config/axios/service.ts:86（getBaseURL 里 const routeConfig = … 那行）下断点，触发任意一个 1000y 请求， 在 Scope 面板看 routeConfig 是对象还是 null，走的是哪一支。
• 开放问题，请你实测：src/App.vue:24 调的是 gameEnv.init(process.env)，这个 process 是渲染进程的全局对象 （App.vue 里没有 import 它）；而 src/utils/extend/electron.ts:1 拿的 process 来自 @electron/remote，是主进程的。 在 Console 里比一比：

  process.env.VITE_API_PATH
  require('@electron/remote').process.env.VITE_API_PATH

  两者相等吗？把结论告诉我，我回填进 速查卡。