AkiraZ's blog

愿键盘的余温传递到更遥远的将来

Blog / Game Library
0%

Since we requrire cookies when doing web development locally, there are two ways to do this:

  • Copy & paste the cookies from the browser to the localhost
  • Edit hosts file, forwarding url of test environment to 127.0.0.1

However, the first way is combersome, and the second way requires the edit permission. Therefore, there is another solution.

Installation

  • SwitchyOmega is a browser extension, following the normal installation steps.
  • Whistle is a npm package, which can be installed by npm install whistle -g. It usually starts an servcie on 127.0.0.1:8899.

Mechanism

  • All browser traffic first goes through SwitchyOmega, which forwards to 127.0.0.1:8899
  • Configure rules on Whistle, forwarding the urls to the local development environment, all other requests which are not included will be ignored.

Configuration

  • SwitchyOmega
    • New Mode: Set proxy server as 127.0.0.1:8899
  • Whistle
    • Add rules as follows
1
2
3
http://test.com:8080/api ignore://http
http://test.com:8080/web http://localhost:8080/
http://test.com:8080/ http://localhost:8080/
  • 1st line: All backend requests will be ignored.
  • 2nd line: Refer to http://test.com:8080/web/#/, on which The browser will download the index.html entry file. This means that these requests will be forwarded to the local development environment.
  • 3rd line: All remaining requests, which may be frontend resources requests, including .js .css .vue images and node_modules files, will be forwarded to the local development environment.

File vite.config.js

  • The base key should be set as ./, which means all requests, including frontend resources requests and backend requests, will be started from the root path.
  • The proxy key should be set already. All requests should be forwarded to the backend test environment, so no additional processing is required.
  • Add the following code to vite.config.js, if not exists:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
defineConfig({
// ...
server: {
host: "127.0.0.1", // 必须配置,不然 127.0.0.1:8080 不通
port: 8080,
hmr: {
// 避免 vite hmr 报错
protocal: "ws",
host: "127.0.0.1",
},
// ...
},
// ...
});

由于在本地开发时需要获取测试环境的 Cookie,之前一般使用两种方法

  • 把测试环境的 Cookie 修改到本地
  • 调整 host 文件,把测试环境的域名指向127.0.0.1

两者都有点繁琐,而且后者依赖对 host 文件的权限,所以考虑换一套方案

安装 SwitchyOmega 和 whilstle

  • SwitchyOmega 是一个浏览器插件,请使用通常安装插件的方式安装
  • whilstle npm install whistle -g,随后按照提示操作,通常它会把服务开在127.0.0.1:8899
阅读全文 »

Vite 默认打包结果比较现代,有一定概率产生 js 的语法兼容性问题。Vite 默认在build.target中处理结果的目标版本。但是经观察似乎只会处理用户代码,并不会处理依赖中的不兼容问题,所以需要额外配置来做转换。这里的解决方案是使用@vite/plugin-legacy插件。

安装

1
npm install "@vitejs/plugin-legacy@4" -D

依赖大版本需要与vite大版本保持一致,本文假定vite@^4

阅读全文 »

为什么需要 php-fpm

MediaWiki 默认使用 Apache 服务器,由于我的服务器上已经有了 Nginx,所以打算直接用 Nginx 转发。但是如果直接转发就会发现,访问index.php时会变成文件下载而不是网页,所以需要在 Nginx 中转发给 php-fpm,让 php-fpm 处理成 Html。

阅读全文 »

时代变了,ESLint 更新到9.x之后,废弃了部分对格式的规则,只保留了对语法的校验。所以如果需要 ESLint 自动化格式,需要安装额外的插件以及配置。

本文适用 eslint >= 9.0.0
本文包括 vue + typescript 的配置

安装

参考package.json配置

1
2
3
4
5
6
7
8
9
10
11
12
{
"devDependencies": {
"@eslint/js": "^9.16.0",
"@stylistic/eslint-plugin": "^2.11.0",
"@vue/eslint-config-typescript": "^14.1.4",
"eslint": "^9.16.0",
"eslint-plugin-vue": "^9.32.0",
"globals": "^15.13.0",
"typescript": "~5.6.2",
"typescript-eslint": "^8.17.0"
}
}
阅读全文 »

最近习惯用使用休眠关闭机器,但机器总是莫名其妙就被不知名硬件唤醒了,于是查了些指令在这记一下

可以唤醒系统的设备列表

1
powercfg -devicequery wake_armed

会列出所有可以唤醒系统的设备,之后去设别管理器,右键电源管理关闭。

抓出过很多内鬼,包括键盘鼠标甚至包括 xbox 手柄无线接收器

查看上次唤醒系统的设备

1
powercfg -lastwake

Sass 是流行的 CSS 的拓展语言,用过的工具有 sass、node-sass 和 sass-loader,相互之间有联系,配置的时候又经常遇到问题。简单总结一下。

sass 和 node sass

这两放在一起,因为都是 sass 编译工具。从本质上提供了对 sass 语法以及各类特性的支持。

阅读全文 »

v-model语法糖能够实现 Vue 中父组件与子组件之间的双向数据绑定。

很惊讶地发现在最近的 Vue 版本中又得到了更新,似乎变得好用了些。

Vue 3.4+

1
2
3
4
5
6
7
8
9
10
11
12
<!-- Child.vue -->
<script setup>
const model = defineModel();

function update() {
model.value++;
}
</script>

<template>
<div>parent bound v-model is: {{ model }}</div>
</template>
1
2
<!-- Parent.vue -->
<Child v-model="count" />

使用宏 defineModel()来产生一个双向绑定的变量。

如果是多个变量:

  • 使用 defineModel('foo')defineModel('bar')
  • 使用 v-model:foo="val1"v-model:bar="val2"
阅读全文 »