学习周报 - 2024/03/10

nginx根据请求的终端返回不同的HTML文件

通过在nginx配置文件中添加这段代码，可以配置根据请求设备不同返回不同的文件：

# ...
# 新建一个map，根据请求头中的字段返回不同的值
map $http_user_agent $isMobile {
	default 0;
	"~*android|iphone|ipad" 1;
}

server{
#...
	location / {
		root html;
		if ($isMobile) {
			# 如果是移动端，则将根目录设置为mobile
			root mobile
		}
		index index.html index.htm;
	}
}

把ts的错误显示在浏览器中

npm: vite-plugin-checker

大部分时候，ts的报错只显示在编辑器中，如果强行忽略报错，让代码执行，有时也能在浏览器中正常执行，但是这就不符合使用ts的要求。

所以通过使用vite-plugin-checker这个插件，可以强制让ts的错误显示在浏览器中

Vite中通过三斜线指令来引入和定义环境变量类型

三斜线指令 · TypeScript中文网 · TypeScript——JavaScript的超集

在ts文件的头部，可以添加以三斜线开头的特殊注释，从而引入类型声明，例如

// 引入@types/node/index.d.ts
/// <reference types="node" />

// 引入相对路径下的d.ts文件的类型声明
/// <reference path="./interfaces.d.ts" />

当在Vite项目中需要定义环境变量类型时，可以借助这个语法：

// 引入Vite的类型声明文件
/// <reference types="vite/client" />

// 定义这个接口，会被合并到Vite的类型声明中
interface ImportMetaEnv {
	// 在这里添加自定义环境变量的类型生命
  readonly VITE_APP_TITLE: string;
}