Nuxt 3 引入百度统计

使用 Nuxt 开发的时候会有相应的统计需求,这个时候可能会选用百度统计。但百度统计给的代码过于繁琐,经过在网络上搜索了很多教程以后,发现其实只有一行代码很重要。

操作步骤

nuxt.config.ts 中插入以下代码:

app: {
  head: {
    script: [{ src: `https://hm.baidu.com/hm.js?xxxxxx` }],
  },
},

https://hm.baidu.com/hm.js? 后面的内容替换成百度统计内给出的代码即可添加成功。

出现的问题

referrer 被禁用

在刚开始测试代码安装的时候,百度统计内的代码检查提示:“referrer 被禁用”,通过搜索找到了对应的解决方法。

解决方法

因为我是用的是 nginx 作为反向代理器,所以添加以下加租代码:

server {
     # HTTPS的默认访问端口443。
     # 如果未在此处配置HTTPS的默认访问端口,可能会造成Nginx无法启动。
     listen 443 ssl;

     # ......其他设置

     # 设置 Referrer Policy
     add_header Referrer-Policy origin;

}

这样再次执行代码安装检查,就会显示代码安装正确了。

引用

网站百度统计referrer被禁用解决方案

nuxt 引入百度统计

基于 winston 实现 Nest.js 应用日志服务

Nest.js logo
Nest.js Logo

实现 Nest.js 应用日志服务有很多选择,较为出名的有:Log4jswinstonPino

这次就以 winston 为例,记录一下如何实现 Nest.js 应用日志服务。本文参考了搜索引擎中许多教程与案例,如果觉得有任何问题可以留言与我交流。

引入 winston

相关依赖:winston、nest-winston、winston-daily-rotate-file

pnpm install winston nest-winston winston-daily-rotate-file

winston-daily-rotate-file 用于实现日志文件的定期归档。由于应用日志量一般都非常大,因此需要定期自动对日志文件进行轮换、归档与删除。

配置 winston

app.module.ts

import {
  // ...
  Module,
} from '@nestjs/common';
import { WinstonModule } from 'nest-winston';
import * as winston from 'winston';
import 'winston-daily-rotate-file';
// ...

@Module({
  controllers: [],
  imports: [
    // ...
    WinstonModule.forRoot({
      transports: [
        new winston.transports.DailyRotateFile({
          dirname: `logs`, // 日志保存的目录
          filename: '%DATE%.log', // 日志名称,占位符 %DATE% 取值为 datePattern 值。
          datePattern: 'YYYY-MM-DD', // 日志轮换的频率,此处表示每天。
          zippedArchive: true, // 是否通过压缩的方式归档被轮换的日志文件。
          maxSize: '20m', // 设置日志文件的最大大小,m 表示 mb 。
          maxFiles: '14d', // 保留日志文件的最大天数,此处表示自动删除超过 14 天的日志文件。
          // 记录时添加时间戳信息
          format: winston.format.combine(
            winston.format.timestamp({
            	format: 'YYYY-MM-DD HH:mm:ss',
            }),
            winston.format.json(),
          ),
        }),
      ],
    }),
  ],
  // ...
})
export class AppModule { // ... }

在全局中间件、过滤器以及拦截器中记录日志

获取请求头信息的工具方法

getReqMainInfo.ts

import { Request } from 'express';

export const getReqMainInfo: (req: Request) => {
  [prop: string]: any;
} = req => {
  const { query, headers, url, method, body, connection } = req;

  // 获取 IP
  const xRealIp = headers['X-Real-IP'];
  const xForwardedFor = headers['X-Forwarded-For'];
  const { ip: cIp } = req;
  const { remoteAddress } = connection || {};
  const ip = xRealIp || xForwardedFor || cIp || remoteAddress;

  return {
    url,
    host: headers.host,
    ip,
    method,
    query,
    body,
  };
};

在全局中间件中记录日志

logger.middleware.ts

import { Inject, Injectable, NestMiddleware } from '@nestjs/common';
import { Request, Response, NextFunction } from 'express';
import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
import { Logger } from 'winston';
import { getReqMainInfo } from '../../utils/getReqMainInfo';

@Injectable()
export default class LoggerMiddleware implements NestMiddleware {
  // 注入日志服务相关依赖
  constructor(
    @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger,
  ) {}

  use(req: Request, res: Response, next: NextFunction) {
    // 获取请求信息
    const {
      query,
      headers: { host },
      url,
      method,
      body,
    } = req;

    // 记录日志
    this.logger.info('route', {
      req: getReqMainInfo(req),
    });

    next();
  }
}

在全局异常过滤器中记录日志

uinify-exception.filter.ts

import {
  ArgumentsHost,
  Catch,
  ExceptionFilter,
  HttpException,
  HttpStatus,
  Inject,
} from '@nestjs/common';
import { Response, Request } from 'express';
import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
import { Logger } from 'winston';
import { getReqMainInfo } from '../../utils/getReqMainInfo';

@Catch()
export default class UnifyExceptionFilter implements ExceptionFilter {
  // 注入日志服务相关依赖
  constructor(
    @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger,
  ) {}

  catch(exception: HttpException, host: ArgumentsHost) {
    const ctx = host.switchToHttp(); // 获取当前执行上下文
    const res = ctx.getResponse<Response>(); // 获取响应对象
    const req = ctx.getRequest<Request>(); // 获取请求对象
    const status =
      exception instanceof HttpException
        ? exception.getStatus()
        : HttpStatus.INTERNAL_SERVER_ERROR;

    const response = exception.getResponse();
    let msg =
      exception.message || (status >= 500 ? 'Service Error' : 'Client Error');
    if (Object.prototype.toString.call(response) === '[object Object]') {
      if (typeof response === 'string') {
        msg = response;
      }
    }
    const { query, headers, url, method, body } = req;

    // 记录日志(错误消息,错误码,请求信息等)
    this.logger.error(msg, {
      status,
      req: getReqMainInfo(req),
      // stack: exception.stack,
    });

    res.status(status >= 500 ? status : 200).json({ code: 1, msg });
  }
}

在响应拦截器中记录日志

unify-response.interceptor.ts

import {
  CallHandler,
  ExecutionContext,
  Inject,
  Injectable,
  NestInterceptor,
} from '@nestjs/common';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Request } from 'express';
import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
import { Logger } from 'winston';
import { getReqMainInfo } from '../../utils/getReqMainInfo';

@Injectable()
export class UnifyResponseInterceptor implements NestInterceptor {
  constructor(
    @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger,
  ) {}

  intercept(context: ExecutionContext, next: CallHandler): Observable<any> {
    const ctx = context.switchToHttp();
    const req = ctx.getRequest<Request>();

    return next.handle().pipe(
      map(data => {
        this.logger.info('response', {
          responseData: data,
          req: getReqMainInfo(req),
        });
        return {
          code: 0,
          data,
          msg: '成功',
        };
      }),
    );
  }
}

应用全局中间件、过滤器以及拦截器

app.module.ts

import {
  MiddlewareConsumer,
  Module,
  NestModule,
  RequestMethod,
} from '@nestjs/common';
import { APP_FILTER } from '@nestjs/core';
import { WinstonModule } from 'nest-winston';
import * as winston from 'winston';
import 'winston-daily-rotate-file';
import UnifyExceptionFilter from './common/uinify-exception.filter';
import logger from './common/logger.middleware';
// ...

@Module({
  // ...
  imports: [
    // ...
    WinstonModule.forRoot({
     // ...
    }),
  ],
  providers: [
    // ...
    // 应用全局过滤器
    {
      provide: APP_FILTER,
      useClass: UnifyExceptionFilter,
    },
    // 应用拦截器
    {
      provide: APP_INTERCEPTOR,
      useClass: UnifyResponseInterceptor,
    },
  ],
})
export class AppModule implements NestModule {
  // 应用全局中间件
  configure(consumer: MiddlewareConsumer) {
    consumer.apply(logger).forRoutes({ path: '*', method: RequestMethod.ALL });
  }
}

完成以上配置后,项目目录下就会包含访问及错误信息的日志文件。日志文件将每天自动归档压缩,超过 14 天的日志也将被自动删除。

引用

基于 Winston 实现 NestJS 应用日志服务
NestJS: Setting up file logging daily rotation with winston

Vue 项目配置 @ 别名

在实际项目中,我们通常可以将 src 目录通过设置别名为 @ 目录,这样引入文件时候可以一目了然而且使用起来非常方便,可以提高我们的开发效率。

@ 代表的是 src 文件夹,这样将来文件过多,找的时候也方便,而且也还有提示。

Webpack + JavaScript 项目配置 @ 别名

在项目新建 vue.config.js,编辑 vue.config.js 内容如下:

const path = require('path')
 
function resolve(dir) {
  return path.join(__dirname, dir)
}
 
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  }
}

新建 jsconfig.json,内容如下:
@node_moulesdist 文件中不能使用)

# 方法一

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
}
# 方法二

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  "exclude": [
    "node_modules",
    "dist"
  ]
}

Vite + TypeScript 项目配置 @ 别名

编辑 vite.config.ts 内容如下:

import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
import { resolve } from 'path'
 
export default defineConfig({
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src') // 路径别名
    },
    extensions: ['.js', '.json', '.ts', '.vue'] // 使用路径别名时想要省略的后缀名,可以自己 增减
  }
})

编辑 tsconfig.json,内容如下:

{
  "compilerOptions": {
    "baseUrl": ".",
    // 用于设置解析非相对模块名称的基本目录,相对模块不会受到baseUrl的影响
    "paths": {
      // 用于设置模块名到基于baseUrl的路径映射
      "@/*": [
        "src/*"
      ]
    }
  }
}

使用方法

重新运行一遍项目即可

import Home from '@/pages/Layout/index.vue'

可能出现的问题

使用 WebStorm + Vue 3 + TypeScript 开发项目时使用 @ 别名可能会存在以下报错:

Cannot find module ‘@/views/xxx.vue‘ or its corresponding type declarations

意思是说找不到对应的模块“@/views/xxx.vue”或其相应的类型声明,因为 TypeScript 只能解析 .ts 文件,无法解析 .vue 文件

解决方法

查找项目内的 vite-env.d.ts 文件,一开始的时候 vite-env.d.ts 是空文件,我们可以在其中引入如下代码:

declare module '*.vue' {
  import { DefineComponent } from "vue"
  const component: DefineComponent<{}, {}, any>
  export default component
}

加入上面的代码后重新运行项目就不再报错了。

参考文章

Vue项目中怎么配置在src文件下@别名
vue3/vue2 项目配置 别名 @
Cannot find module ‘../views/HomeView.vue‘ or its corresponding type declarations.ts
webstorm vue3+ts报错:Cannot find module ‘@/views/xxx.vue‘ or its corresponding type declarations

WebStorm 配置 TypeScript

WebStorm 可以开发 TypeScript,同时支持自动编译为 JavaScript 文件,具体操作如下:

1. 前往 Node.js 官网下载安装 Node.js

2. 下载安装新版本的 WebStorm

3. 使用 node 的 npm 命令安装 TypeScript 编译器

npm install typescript -g

安装好,在命令行可以查看编译器的版本:

tsc --version

4. 打开 WebStorm,新建一个空白项目

5. 在 WebStorm 中右击项目名,选择 new -> tsconfig.json File,创建 tsconfig.json 文件

6. 打开 WebStorm,为 TypeScript 文件更改编译设置,File -> Settings -> File Watchers -> TypeScript,这里我们需要选择 TypeScript,但是 File Watchers 下默认是不存在的。需要点击右侧“ + ”号,选择 <custom>

7. 在弹出的 New File Watcher 中,填写 Name,在 Wached Files 中的 File type 选择 TypeScriptWatcher Settings 中填写如下内容:

Program(程序):tsc 的路径

Arguments(参数):--sourcemap --target "ES6"

Output paths to refresh(要刷新的输出路径):$FileNameWithoutExtension$.js:$FileNameWithoutExtension$.js.map

Working directory(工作目录):$FileDir$

8. 同时,需要设置 TypeScript 自动编译,在 Setting -> Language & Frameworks 中的 TypeScript 勾选 Compiler 中的 Recomplie on changes

9. 之后修改 TypeScript 文件时,WebStorm 就会自动编译