分类 WEB开发下的文章

记录一次 Node.js 构建失败的坑（/bin/sh: vite：未找到命令 error Command failed with exit code 127.）

作者: Chuwen
时间: 2023-10-13
分类: WEB开发
评论

Axios 异常拦截器 - 部分请求自定义处理异常

作者: Chuwen
时间: 2023-02-24
分类: TypeScript
评论

## 现状

项目当前的 `request.ts`:

```ts
import toast from "./toast"

const request = axios.create({
  baseURL: "https://api.nowtime.cc",
  responseType: "json",
  timeout: 12_000
})

// 响应拦截器
request.interceptors.response.use(
  response => {
    // TODO 响应拦截器相关操作

return response
  },
  error => {
    // 处理网络错误
    if (
      error.code === "ECONNABORTED"
      || error.message === "Network Error"
      || error.message.includes("timeout")
    ) {
      toast("Network timeout", 5e3, true)
      return Promise.reject(error)
    }

if (error.response) {
      // TODO 处理 API 响应的错误
      const { status } = error.response

if (status === 500) {
        toast("Server error", 5e3)
      }
      // ......
    }

return Promise.reject(error)
  }
)

export default request

```

但是上面的代码有些弊端，比如有一些请求需要自定义处理异常的，并不需要弹出 `toast`，那么我们就需要这么去实现

## 实现代码

新增 `axios.ts` 文件，并粘贴如下代码：

```ts
import "axios"

declare module "axios" {
  // 扩展 AxiosRequestConfig interface
  export interface AxiosRequestConfig {
    catchHandler?: boolean;// 是否开启自动处理异常
  }
}

```

`request.ts`:

```ts
import toast from "./toast"

const request = axios.create({
  baseURL: "https://api.nowtime.cc",
  responseType: "json",
  timeout: 12_000
})

// 响应拦截器
request.interceptors.response.use(
  response => {
    // TODO 响应拦截器相关操作

return response
  },
  error => {
    // 处理网络错误
    if (
      error.code === "ECONNABORTED"
      || error.message === "Network Error"
      || error.message.includes("timeout")
    ) {
      toast("Network timeout", 5e3, true)
      return Promise.reject(error)
    }

// 判断当前请求 config 是否进行同一处理异常
    // false：不进行同一错误处理
    if (Object.hasOwn(error.config, "catchHandler") && error.config.catchHandler === false) {
      return Promise.reject(error)
    }

if (error.response) {
      // TODO 处理 API 响应的错误
      const { status } = error.response

if (status === 500) {
        toast("Server error", 5e3)
      }
      // ......
    }

return Promise.reject(error)
  }
)

export default request

```

### 使用：
```ts
import request from "./request"

rquest.get(`/v2/user`, {
  catchHandler: true
})
```

解决 ECharts 已弃用参数：[ECharts] DEPRECATED: itemStyle.normal.lineStyle is deprecated, use lineStyle instead.

作者: Chuwen
时间: 2022-09-21
分类: WEB开发
评论

Vite.js 读取环境变量误区

作者: Chuwen
时间: 2022-09-17
分类: TypeScript,WEB开发
评论

## 背景

当我在打包文件后，调试时发现我的环境变量都输出在 JS 中，当时我大为震惊?
![当我用 Vite.js 打包文件后，调试时发现我的环境变量都输出在 JS 中](https://cdn.nowtime.cc/2022/09/17/511833052.png)

## 解决办法

然后仔细回想，我用的是 `process.env` 去读取环境变量的，我记得在 Vite.js 官方文档中说，只会暴露出 `VITE_` 前缀的环境变量，带着这个疑惑，我又翻看了官方文档：https://cn.vitejs.dev/guide/env-and-mode.html

![](https://cdn.nowtime.cc/2022/09/17/3888607772.png)

### 恍然大悟

原来是我记错了/搞混了，应该是用 `import.meta.env` 去读取环境变量，然后立即全局替换，将`process.env.` 替换为 `import.meta.env`

### 再次打包

再次打包预览后，发现只剩下 `VITE_` 前缀的环境变量了

![](https://cdn.nowtime.cc/2022/09/17/3137341323.png)

## 可优化的点

我发现打包后，只要在任意地方用到了 `import.meta.env.VITE_*`，就会打包成这样，所以我在很多地方都能够看到

```js
var isPreview = "true" === {
        VITE_APP_ENV: "local",
        VITE_MOCK_LOGIN_UID: "1",
        VITE_API_URL: "https://api-.com/v1/",
        VITE_SHOPIFY_API_KEY: "14356af9cc5372",
        VITE_DEFAULT_LANG: "en",
        VITE_ENABLE_HTTP_REPLACE_HTTPS: "true",
        VITE_EXTENSION_UUID: "c899b-afa8917aa493",
        VITE_I18N_DEBUG: "false",
        VITE_COOKIE_NAME_PREFIX: "pg_",
        BASE_URL: "/",
        MODE: "production",
        DEV: !1,
        PROD: !0
    }.VITE_PLUGIN_IS_PREVIEW
```

这显然不是很好的做法

### 优化办法

对此我想到一个简单的优化办法，可以写成如这种：

```ts
/* eslint-disable sort-keys,sort-keys-fix/sort-keys-fix */
const envLists = import.meta.env

const EnvHelper = {
  // 自己定义的
  env: envLists.VITE_APP_ENV,

// vite 自带的判断条件
  get mode() {
    return envLists.MODE
  },

get isDev() {
    return envLists.MODE === "development"
  },

get isProd() {
    return !this.isDev
  },

// /////////
  // 自定义

get mockLoginUid() {
    return envLists.VITE_MOCK_LOGIN_UID
  },

get apiURL() {
    return envLists.VITE_API_URL
  },

get shopifyApiKey() {
    return envLists.VITE_SHOPIFY_API_KEY
  },

get defaultLang() {
    return envLists.VITE_DEFAULT_LANG
  },

get enableHttpReplaceHttps() {
    return envLists.VITE_ENABLE_HTTP_REPLACE_HTTPS
  },

get extensionUUID() {
    return envLists.VITE_EXTENSION_UUID
  },

get i18nDebug() {
    return envLists.VITE_I18N_DEBUG
  },

get cookieNamePrefix() {
    return envLists.VITE_COOKIE_NAME_PREFIX
  },

get pluginIsPreview() {
    return envLists.VITE_PLUGIN_IS_PREVIEW
  },

get pluginBuildTime() {
    return envLists.VITE_PLUGIN_BUILD_TIME
  }
}

export default EnvHelper
```

Vue 3 渲染后端返回的标签 | component 标签的使用和 compile 的使用

作者: Chuwen
时间: 2022-05-13
分类: WEB开发
评论

## 缘由

项目中有一个需求，需要动态渲染后端返回的 HTML，如下所示，下述的**每一个** `svg` 是后端动态返回的
```html
<template>
	<div class="class-name">
		
		<svg></svg>
		<svg></svg>
		<svg></svg>
	</div>
</template>
```

试过这样，但是不会渲染出来：
```html
<template>
	<div class="class-name">
		<template v-html="svg1"></template>
		<template v-html="svg2"></template>
		<template v-html="svg3"></template>
	</div>
</template>
```

## 解决方案

通过浏览 Vue.js 文档，发现如下文章：
- [渲染函数 - 模板编译](https://v3.cn.vuejs.org/guide/render-function.html#%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BB%84%E4%BB%B6 "模板编译")
- [内置特殊元素 - component](https://staging-cn.vuejs.org/api/built-in-special-elements.html#component)
- [在 Vue.js 中使用 Vue.compile](https://stackoverflow.com/questions/68981411/vue3-how-to-use-vue-compile-in-vue3)

### `<component>` 是 Vue 内置特殊元素

> `<component>` 和 `<slot>` 具有类似组件的特性，也是模板语法的一部分。它们并非真正的组件，同时在模板编译期间会被编译掉。因此，它们通常在模板中用小写字母书写。

所以，使用 `<component>`、`Vue.compile` 就实现了我想要的功能

gist: https://gist.github.com/PrintNow/f9fec1890bd736593800564c45584c3b
```vue
<template>
  <h2>实现效果</h2>
  <div class="class-name">
    <component :is="getSvg" :style="svg_style"></component>
    <component :is="getSvg" :style="svg_style"></component>
    <component :is="getSvg" :style="svg_style"></component>
  </div>

<h2><code>getSvg</code> 输出结果：</h2>
  <pre v-text="getSvg"></pre>

export default {
  name: "App",
  components: {},
  data() {
    return {
      svg_style: { width: "64px", height: "auto" },
      svg: `<svg t="1652418272564" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2045" width="512"
     height="512">
    <path d="M408 617m-348 0a348 348 0 1 0 696 0 348 348 0 1 0-696 0Z" fill="#C9F4EB" p-id="2046"></path>
    <path d="M927 369H111.75a25 25 0 0 1 0-50H927a25 25 0 0 1 0 50zM569.79 748H225a30 30 0 0 1 0-60h344.79a30 30 0 0 1 0 60zM668 748h-2.84a30 30 0 1 1 0-60H668a30 30 0 0 1 0 60z"
          fill="#087E6A" p-id="2047"></path>
    <path d="M832 860H197A125.14 125.14 0 0 1 72 735V263a125.14 125.14 0 0 1 125-125h635a125.14 125.14 0 0 1 125 125v472a125.14 125.14 0 0 1-125 125zM197 188a75.09 75.09 0 0 0-75 75v472a75.09 75.09 0 0 0 75 75h635a75.09 75.09 0 0 0 75-75V263a75.09 75.09 0 0 0-75-75z"
          fill="#087E6A" p-id="2048"></path>
</svg>`,
    };
  },
  computed: {
    getSvg() {
      return compile(this.svg);
    },
  },
};
</script>

记录一次 Node.js 构建失败的坑（/bin/sh: vite：未找到命令 error Command failed with exit code 127.）

Axios 异常拦截器 - 部分请求自定义处理异常

解决 ECharts 已弃用参数：[ECharts] DEPRECATED: itemStyle.normal.lineStyle is deprecated, use lineStyle instead.

Vite.js 读取环境变量误区

Vue 3 渲染后端返回的标签 | component 标签的使用和 compile 的使用

最新文章

最近回复

分类

归档

其它