Code on Coder_Studio

零成本上线个人项目 ——ngrok 仅穿透前端实现公网访问

Wed, 04 Mar 2026 17:39:43 +0000

开发个人项目时，想让他人访问往往需要购买服务器、配置域名解析，成本高且流程繁琐。

本文介绍一种零成本方案 —— 仅穿透前端即可实现内网个人项目的公网访问。

ngrok 账号注册与工具准备

首先在https://ngrok.com/ 官网注册一个账号，就能获得一个免费的dev结尾的域名。

注册好之后，下载对应的zip压缩包

在官网个人后台 / 仪表盘（Dashboard）可直接复制个人专属的 Authtoken。

分框架适配配置

如果前端是用 Vite + React 的项目，需要在 vite.config.js 文件加上allowedHosts这一行代码：

// vite.config.js
export default defineConfig({
  server: {
    allowedHosts: ['xxx.dev']  // ngrok 域名
  }
})

如果前端是基于 Umi Max + Ant Design Pro 的项目，前端默认是跑在 localhost:8000（umi dev），则需要修改2个文件。

1.config/config.ts

在文件里加上如下 proxy 部分：

// config/config.ts
export default defineConfig({
  // ... 其他配置 ...

  proxy: {
    '/api/': {
      target: 'http://localhost:[项目后端的端口号]',
      changeOrigin: true,
      // 根据后端实际路由决定是否 rewrite
      // 如果后端接口路径就是 /api/xxx 开头 → 不要 rewrite
      // 如果后端是 /user/xxx（无 /api 前缀） → 加下面这行
      // pathRewrite: { '^/api': '' },
    },
  },

  // ... 其他配置 ...
});

这段只在 umi dev / npm run dev 时生效。

2.src/app.tsx

找到 request 配置，把 baseURL 相关全部注释或删除：

// src/app.tsx

export const request: RequestConfig = {
  // ！！！ 下面这整段注释掉或删除 ！！！
  // baseURL: "http://localhost:[项目后端的端口号]",

  // 保持这两个（ngrok 警告页绕过 + cookie 跨域）
  withCredentials: true,
  headers: {
    'ngrok-skip-browser-warning': 'true',
  },

  ...errorConfig,
};

项目启动与公网访问

接下来，依次启动后端和前端，将之前下载好的压缩包解压后直接双击 exe 即可打开命令行，执行以下命令：

1
2
3

ngrok config add-authtoken [YourAuthtoken]

ngrok http [项目前端的端口号]

复制 ngrok 生成的 https 地址，其他人就能够访问你的项目了。

零成本从0到1搭建个人博客

Thu, 19 Feb 2026 12:20:35 +0000

测试环境：Windows 11 专业版 + Git 2.45.1

下载Hugo

点击进入以下网页：https://github.com/gohugoio/hugo/tags

可按需选择版本，如v0.154.5。

也可以通过百度网盘链接下载：

【hugo_extended_0.154.5_windows-amd64.zip】

链接: https://pan.baidu.com/s/1XD1Zi877nFvVZaXw0Q9-wA 提取码: 477k

创建个人博客

解压这个压缩包，进入到解压后的文件夹，右键进入命令行界面，输入以下命令【hugo new site CodeEdge】，其中【CodeEdge】名字可任意取。

将【hugo.exe】文件复制到【CodeEdge】文件夹中，再cd到CodeEdge目录，执行以下命令启动服务【hugo server -D】

配置个人博客的主题

点击进入以下网页https://github.com/CaiJimmy/hugo-theme-stack/tags，这里选择的是【Stack】主题，可按需选择版本，如v3.33.0。

也可以通过百度网盘链接下载：

【hugo-theme-stack-3.33.0.zip】

链接: https://pan.baidu.com/s/1rNPzDXJbeFSrqURK4X1JJg 提取码: pwgv

将这个压缩包解压到CodeEdge的themes文件夹下：

将【exampleSite】文件夹下的【content】文件夹和【hugo.yaml】文件复制到【CodeEdge】文件夹下：

接下来，将【CodeEdge】文件夹下的【hugo.toml】文件以及【content/post】路径下的【rich-content】文件夹一并删除：

编辑【hugo.yaml】文件，将theme修改为themes文件夹下的主题文件夹同名：

在命令行中再次执行【hugo server -D】

访问【http://localhost:1313】就能加载添加的主题：

新建Github博客网站仓库

在Github上新建一个博客网站仓库，如【CodeEdge.github.io】

。

为了连接的稳定性，github上最好选择ssh：

在github的博客网站仓库依次执行以下步骤：

编辑【hugo.yaml】文件，将baseurl修改为如下网站名称，与上面的步骤⑤保持一致：

之后即可通过访问这个baseurl来查看部署的博客了。

在命令行cd到public文件夹：

依次执行以下命令：

echo "# CodeEdge.github.io" >> README.md
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:github用户名/CodeEdge.github.io.git
git push -u origin main

新建Github博客源代码仓库

在Github上新建一个博客源代码仓库，如【CodeEdge.github.io】

。

在命令行cd到CodeEdge文件夹：

依次执行以下命令：

echo "# CodeEdgeSource" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:github用户名/源代码仓库.git
git push -u origin main

实现Github Action自动部署

在github上依次进行以下操作，创建token，需要勾选【repo】和【workflow】：

将这个token保存到源代码仓库【CodeEdgeSource】中：

在【CodeEdge】文件夹下新建以下文件：

hugo_deploy文件的主要内容如下：

name: Build and Deploy Hugo Site

on:
  push:
    branches:
      - main
    paths:
      - "content/**/*.md"
      - "static/**"
      - "layouts/**"
      - "assets/**"
  workflow_dispatch: # 支持手动触发

concurrency:
  group: deploy-pages
  cancel-in-progress: true

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    permissions:
      contents: write
    steps:
      - name: Checkout source repository
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
          token: ${{ secrets.DEPLOYCODEEDGE_TOKEN }} # 用于图片上传需要推送权限

      - name: Git Configuration
        run: |
          git config --global core.quotePath false
          git config --global core.autocrlf false
          git config --global core.safecrlf true
          git config --global core.ignorecase false

      # ============ 构建 Hugo 站点 ============
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v3
        with:
          hugo-version: "latest"
          extended: true

      - name: Build site
        run: hugo -D # 包含 draft 文章

      # ============ 部署到 GitHub Pages ============
      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v4
        with:
          personal_token: ${{ secrets.DEPLOYCODEEDGE_TOKEN }}
          external_repository: github用户名/博客网站仓库
          publish_branch: main
          publish_dir: ./public
          force_orphan: true
          commit_message: "auto deploy: ${{ github.event.head_commit.message }}"
          user_name: "github-actions[bot]"
          user_email: "github-actions[bot]@users.noreply.github.com"

在【CodeEdge】文件夹下新建【.gitignore】文件，避免提交以下非必要的文件：

public
resources
.hugo_build.lock
hugo.exe

*.lock
.DS_Store
Thumbs.db
*.tmp
*.log
.idea/
.vscode/

博客部署步骤

#新建博客
hugo new content post/XXX.md

#本地查看
hugo server -D

#部署
git add .

git commit -m "xxx"

git push origin main

当新增的博客推送到源代码仓库后，GitHub Actions 会自动执行以下步骤：

检测到推送
触发 .github/workflows/hugo_deploy.yaml 工作流
运行 hugo -D 构建网站
将生成的静态文件部署到博客网站仓库
等待一定的时间后，博客网站会自动更新

参考资料

1.配置ssh解决https不稳定的问题-CSDN博客

2.下载 GitHub 仓库「单个文件夹」的方法_github只下载某个文件夹-CSDN博客

3.推送错了仓库的解决办法-CSDN博客

4.本地改乱了代码，如何恢复成和 GitHub 仓库一致的干净版本？-CSDN博客

5.VS Code图形化界面操作Git-CSDN博客

6.消除VS Code在检查style标签里面的 CSS 代码时产生的语法警告-CSDN博客

小贴士

1.Hugo 需要 Front Matter 才能识别文章。也就是在文件最开头需要有以下这些代码：

+++
title = '配置ssh解决https不稳定的问题'
date = '2026-01-13T14:20:00+08:00'
draft = false
+++

2.github账号现在有一个输入验证码的步骤，可在浏览器上安装【2FA Authenticator】插件获取。

3.一些搭建博客可能用到的网站

免费图标网站	https://icon-icons.com/
emoji词典	https://www.emojiall.com/
在线PS工具	https://ps.pic.net/
ANI 鼠标样式转 PNG 文件在线工具	https://ezgif.com/ani-to-apng
PNG转ICO在线工具	https://www.png2ico.com/
免费的商用字体	https://www.100font.com/

Spring Boot测试启动失败：SLF4J日志多实现冲突解决方案

Thu, 05 Feb 2026 12:22:13 +0000

在开发 Spring Boot +LangGraph4J项目时，打算利用阿里云百炼的文生图模型生成Logo图片，在引入了阿里云百炼 SDK（dashscope-sdk-java）后，执行单元测试（LogoGeneratorToolTest）时，项目直接启动失败，控制台打印大量报错日志:

SLF4J(W): Class path contains multiple SLF4J providers.
SLF4J(W): Found provider [org.slf4j.simple.SimpleServiceProvider@206a70ef]
SLF4J(W): Found provider [ch.qos.logback.classic.spi.LogbackServiceProvider@292b08d6]
...
Caused by: java.lang.IllegalStateException: LoggerFactory is not a Logback LoggerContext but Logback is on the classpath. Either remove Logback or the competing implementation (class org.slf4j.simple.SimpleLoggerFactory loaded from .../slf4j-simple-2.0.17.jar)

原因分析

SLF4J（Simple Logging Facade for Java）是日志门面接口，本身不实现日志打印功能，需要绑定一个具体的日志实现组件（如Logback、Log4j、SLF4J-Simple等）。

其中，Logback是由spring-boot-starter-logging自动引入，Spring Boot官方推荐的日志组件，支持日志配置、文件滚动、异步打印等企业级特性。

而SLF4J-Simple是由阿里通义SDK（dashscope-sdk-java）依赖传递引入，是一个轻量但功能简单的日志实现。

由于在这个项目类路径下同时存在两个SLF4J的实现组件，违反了“一个日志门面+一个实现”的规范，导致Spring容器启动时无法确定使用哪个日志工厂，最终加载应用上下文失败。

解决方案

保留Logback，排除冲突的SLF4J-Simple依赖，修改pom.xml，排除冲突依赖，通过标签排除其中的slf4j-simple依赖，具体配置如下：

<!-- 阿里通义SDK依赖 -->
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>dashscope-sdk-java</artifactId>
    <version>2.21.1</version>
    <!-- 排除冲突的slf4j-simple依赖 -->
    <exclusions>
        <exclusion>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-simple</artifactId>
        </exclusion>
    </exclusions>
</dependency>

接下来，打开Maven面板➡️ 右键项目➡️选择“Reload Project”，等待依赖刷新完成，重新运行之前失败的单元测试，日志冲突问题解决。

LangChain4j 踩坑实录：AI 工具调用流式开发，TokenStream 才是正确选择

Tue, 03 Feb 2026 12:35:47 +0000

在基于 LangChain4j + Spring Boot 开发AI代码生成平台的过程中，主要想实现Vue项目带工具调用的流式生成能力，比如自动写入项目文件、构建打包，同时通过响应式流向前端推送实时进度。

但是，在前端调试时，出现了以下错误：

原因分析

1. AI服务接口

1
2

@SystemMessage(fromResource = "prompt/codegen-vue-project-system-prompt.txt")
Flux<String> generateVueProjectCodeStream(@MemoryId long appId, @UserMessage String userMessage);

2. Facade层调度逻辑

case VUE_PROJECT -> {
    Flux codeStream = aiCodeGeneratorService.generateVueProjectCodeStream(appId, userMessage);
    yield processCodeStream(codeStream, CodeGenTypeEnum.VUE_PROJECT, appId);
}

接口调用直接返回业务异常，前端无任何流式输出，日志无有效业务堆栈，仅提示：抱歉，生成过程中出现了错误，请重试。

主要原因是：

TokenStream 是LangChain4j专为AI流式响应 + 工具调用设计的API，内置 onToolRequest/onToolExecuted 等完整回调事件，可无缝衔接工具执行流程；
Flux<String> 是通用响应式流组件，无AI场景专属能力，无法接收、处理工具调用的回调事件。

解决方法

将接口和调度层作如下修改：

// 1. AI接口原生返回值类型
@SystemMessage(fromResource = "prompt/codegen-vue-project-system-prompt.txt")
TokenStream generateVueProjectCodeStream(@MemoryId long appId, @UserMessage String userMessage);

// 2. Facade层调度逻辑
case VUE_PROJECT -> {
    TokenStream tokenStream = aiCodeGeneratorService.generateVueProjectCodeStream(appId, userMessage);
    yield processTokenStream(tokenStream);
}

接下来，就恢复正常了。

小贴士

在集成工具调用的LangChain4j AI场景中，TokenStream 是官方推荐且唯一能保证全功能正常运行的流式类型，Flux 仅适用于无AI业务逻辑的通用流式场景。

在集成第三方框架时，优先使用框架原生提供的组件和API，是保证系统稳定性的最优解。

Spring Boot + LangChain4j 报错：Bean 类型不匹配的解决办法

Mon, 02 Feb 2026 15:26:29 +0000

在使用 Spring Boot + LangChain4j 开发 AI 应用时，在 Service 工厂中注入如下两个Bean：

@Resource
private StreamingChatModel openAiStreamingChatModel;

@Resource
private StreamingChatModel reasoningStreamingChatModel;

一切看起来都很合理，但启动时就报如下错误❌：

`1`	`Bean named 'openAiStreamingChatModel' is expected to be of type 'dev.langchain4j.model.chat.StreamingChatModel' but was actually of type 'dev.langchain4j.model.openai.OpenAiStreamingChatModel'`

最诡异的是 OpenAiStreamingChatModel 明明是 StreamingChatModel 的子类，期望类型和实际类型“看起来完全兼容”，但还是报错！

原因分析

这个错误的根源，其实不是代码逻辑的问题，而是 spring-boot-devtools 的热部署机制导致的类加载冲突。

Spring Boot DevTools 为了实现快速重启，使用了两个类加载器。一个是Base ClassLoader ，主要负责加载Spring Boot 框架、第三方 jar（比如 langchain4j-core.jar）；

另一个是Restart ClassLoader，主要负责加载自己的项目代码（比如src/main/java）。

默认情况下，DevTools 会把所有非项目代码的 jar 放入 Base ClassLoader。

但是！

LangChain4j 这类库，通过 Maven 引入，它其实是属于“第三方依赖”，理应由 Base ClassLoader 加载。

然而，在某些版本或配置下，DevTools 可能错误地将部分 LangChain4j 类交给了 Restart ClassLoader。

这样就造成同一个类，有两个身份，这样 JVM 认为这是两个完全无关的类。即使包名、类名、继承关系都对，也无法进行类型转换或赋值。

解决方案

1.在项目的如下目录中创建文件：

`1`	`src/main/resources/META-INF/spring-devtools.properties`

2.文件内容如下，主要目的是告诉 DevTools，这些 jar 属于基础类路径，统一用 Base ClassLoader 加载。

1
2

restart.include.langchain4j=/langchain4j-.*\.jar
restart.include.openai=/openai-.*\.jar

3.重新运行，问题解决。

IDEA 提示“未配置SpringBoot配置注解处理器“的解决方案

Sun, 01 Feb 2026 14:34:57 +0000

在Spring Boot项目中引入Redis配置类时，出现以下警告提示：

原因分析

坦白说，这个警告不是代码错误，并不会影响程序的运行。

Spring Boot 提供了一个名为 spring-boot-configuration-processor 的工具。

它的作用是在编译时扫描你的项目，找到所有带 @ConfigurationProperties 的类，并生成一个名为 spring-configuration-metadata.json 的元数据文件。 IDEA 正是读取这个文件，才能在 application.yml 中，当你输入 spring.data.redis...，给你提供智能提示。

如果没有配置这个processor，IDEA 就只能给你弹个警告。

但是，话又说回来，虽然程序能正常运行，这个警告看着灰常难受，并且失去了 Spring Boot 强大的配置提示功能。

解决方案

1.在 pom.xml 文件中，添加以下依赖：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-configuration-processor</artifactId>
    <optional>true</optional>
</dependency>

2.添加完后，点击 IDEA 右侧 Maven 面板的 “Reload All Maven Projects”（刷新按钮），确保 jar 包被真正下载。

3.启用 IDEA 注解处理

4.强制重新编译（Rebuild）

点击 IDEA 顶部菜单栏的【Build】，选择【 Rebuild Project】。

⚠️：一定要选【Rebuild】，不是【Build】。

5.接下来点击【隐藏通知】就好了。

Node.js、npm、node、nvm的区别

Fri, 30 Jan 2026 17:24:30 +0000

1. Node.js

让JavaScript脱离浏览器，能运行在服务器/本地终端

举个🌰：

你写了一个app.js文件（里面是console.log('hello')），没有Node.js的话，这个文件只能在浏览器里运行；有了Node.js，就能在终端执行它。

npm、node都依赖Node.js存在。

2. node

安装Node.js后，系统自动添加的终端命令，用来启动Node.js运行环境

node是操作Node.js的“入口”，就像你打开微信的“图标”，图标本身不是微信，只是启动微信的方式。

工作或学习中，很多人说“装node”，其实说的是“装Node.js”。

3. npm

Node Package Manager的缩写，Node.js安装后默认自带的包管理工具。

npm是Node.js的一部分，必须先装Node.js，才会有npm。

4. nvm

Node Version Manager的缩写，第三方开发的Node.js版本管理工具

由于不同项目可能会依赖不同版本的Node.js，比如：

A项目要Node16，B项目要Node20，nvm可以安装多个Node.js版本，并且可以通过一条命令（nvm use 20）瞬间切换当前使用的版本。

nvm是管理Node.js的“工具”，本身并不包含Node.js，需要通过nvm安装具体的Node.js版本。

使用 curl 测试流式输出接口（SSE）

Fri, 30 Jan 2026 16:25:03 +0000

由于 Swagger 对流式输出（Server-Sent Events）的测试不够直观，本文介绍如何使用 curl 命令行工具测试 SSE 接口。

前提条件：

Windows 11 专业版
Git for Windows（自带 Git Bash 和 curl）
后端服务运行在 http://localhost:8080
有效的用户账号和密码

测试步骤

1.任意进入一个文件夹，【右键】选择【Open Git Bash here】 2.执行以下命令，进行登录，获取 Cookie，并将 Cookie 保存到 cookies.txt 文件中

curl -X POST "http://localhost:8080/api/user/login" \
  -H "Content-Type: application/json" \
  -d '{
    "userAccount": "CodeEdge_Xu",
    "userPassword": "xxxxxxxx"
  }' \
  -c cookies.txt

3.调用生成代码接口（流式）

⚠️注意：

需要先从Swagger中获取appId和message，测试已经创建好的应用ID。

curl -G "http://localhost:8080/api/app/chat/gen/code" \
  --data-urlencode "appId=xxxx" \
  --data-urlencode "message=做一个大模型笔记网站，总代码行数不超过30" \
  -H "Accept: text/event-stream" \
  -H "Cache-Control: no-cache" \
  -b cookies.txt \
  --no-buffer

后端 Long 类型 ID 传给前端精度丢失（变00）的解决方案

Wed, 28 Jan 2026 13:23:17 +0000

在前后端分离的开发中，数据库里存的主键 ID 明明是：1750433246798835714，但是前端接收到数据后，ID 却变成了：1750433246798835700，后几位莫名其妙变成了 0！

导致的结果就是：

前端拿这个错误的 ID 去查询详情或执行删除操作时，后端直接报错“数据不存在”，因为 ID 对不上。

原因分析

这个问题的根源在于 Java 和 JavaScript 对数字处理机制的不同。

Java 中的 Long 类型是 64 位有符号整数，它的取值范围非常大；

而常用的雪花算法 (Snowflake) 生成的 ID 通常就是 19 位的，完全在 Java 的 Long 范围内。

JavaScript 中并没有专门的整数类型，所有的数字本质上都是 IEEE 754 标准的双精度浮点数（Double）。

JS 能安全表示的最大整数（Safe Integer）是253-1,这就导致后端的 19 位 ID传给前端时，因为超过了 JS 的安全整数范围，JS 就会发生精度丢失，自动进行“四舍五入”或者直接丢弃低位，导致后几位变成 0。

解决方案

要解决这个问题，最简单有效的方法是：

后端在返回数据给前端时，把 Long 类型的数据统统转换成 String类型。

因为字符串在 JS 里是绝对安全的，不会发生精度丢失。

不需要手动去改每一个 DTO 或 VO 类，只需要在 Spring Boot 中加一个全局配置类，利用 Jackson 的序列化机制自动完成转换。

直接在 config 包下新建一个类JsonConfig.java：

/**
 * Spring MVC全局Json配置
 * 用于解决 Long 类型精度丢失问题
 */
@JsonComponent
public class JsonConfig {

    /**
     * 全局配置：将 Long 类型序列化为 String
     */
    @Bean
    public ObjectMapper jacksonObjectMapper(Jackson2ObjectMapperBuilder builder) {
        // 创建 ObjectMapper
        ObjectMapper objectMapper = builder.createXmlMapper(false).build();
        
        // 创建自定义序列化模块
        SimpleModule module = new SimpleModule();
        
        // 将 Long 类（包装类）和 long（基本类型）都序列化为字符串
        // ToStringSerializer.instance 会调用对象的 toString() 方法
        module.addSerializer(Long.class, ToStringSerializer.instance);
        module.addSerializer(Long.TYPE, ToStringSerializer.instance);

        // 注册模块
        objectMapper.registerModule(module);
        
        return objectMapper;
    }
}

使用这种全局配置方案，可以一劳永逸地解决项目中所有 Long 类型精度丢失的问题。

java: 找不到符号方法 getCode()

Tue, 27 Jan 2026 12:56:48 +0000

运行Spring Boot工程代码出现以下报错：

`1`	`位置: 类型为com.xx.xx.exception.ErrorCode的变量 errorCode`

解决方法

看截图中间那个路径框：

`1`	`...lombok\unknown\lombok-unknown.jar`

这里的 unknown 说明 IDEA 根本没找到 Lombok 的 jar 包。

接下来，

把选中的 “处理器路径” 改为上面那个选项 —— “从项目类路径获取处理器 ”。

因为项目是 Maven 管理的，Maven 已经下载好了 Lombok（在 pom.xml 里），这样的话 IDEA就可以直接用 Maven 下载好的那个包了。

保存并重试，问题解决。

消除VS-Code在检查style标签里面的-CSS-代码时产生的语法警告

Sun, 18 Jan 2026 15:21:15 +0000

这个错误是编辑器的 CSS 校验器不认识 Hugo 模板语法导致的假报错。

主要是在项目的 terms.html 文件中，有一段内联 CSS：

1
2
3

CSSbackground: linear-gradient(135deg, 
    {{ ... }} 0%, 
    {{ ... }} 100%);

编辑器看到 {{ ... }} 这些内容时，以为这是普通的 CSS 代码，但实际上，这些 {{ }} 是 Hugo 的模板指令，这种假报错虽然不会影响站点运行，并且 hugo server 能正常启动、页面显示也没问题。

不过，想消除也不是没有办法，且看：

在项目的根目录下创建一个【.vscode】文件夹📂，然后创建一个【settings.json 】文件：

{
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false
}

之后错误❌就消失了：

docker-Error-response-from-daemon-Get-https-registry-1.docker.io-v2-net-解决办法

Wed, 31 Dec 2025 08:38:06 +0000

VMware虚拟机中的Ubuntu安装Docker后，输入：

`1`	`sudo docker run hello-world`

测试Docker是否安装成功。

出现以下问题：

这个错误是因为 Docker 无法连接到 Docker registry 来拉取镜像。

通过更换国内镜像源解决，创建 Docker 配置文件：

`1`	`sudo vim /etc/docker/daemon.json`

添加国内镜像源：

{
  "registry-mirrors": [
    "https://docker.m.daocloud.io",
    "https://dockerproxy.com",
    "https://docker.mirrors.ustc.edu.cn",
    "https://docker.nju.edu.cn"
  ]
}

重启 Docker:

1
2

sudo systemctl daemon-reload
sudo systemctl restart docker

验证配置:

1
2

# 查看配置是否生效
sudo docker info | grep -A 5 "Registry Mirrors"

出现以下信息：

说明配置已经生效了。

最后再测试运行：

`1`	`sudo docker run hello-world`

看到有如下“Hello from Docker!”的输出，表明Docker已经安装成功了，并且可以拉取镜像去执行了。

ERROR-in-.-node_modules-monaco-editor-esm-vs-base-browser-browser.js-Module-build-failed解决办法。

Sun, 28 Dec 2025 18:05:20 +0000

在用WebStrorm2023调试前端代码时出现以下报错：

1
2
3

ERROR in ./node_modules/monaco-editor/esm/vs/base/browser/browser.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: ..\node_modules\monaco-editor\esm\vs\base\browser\browser.js: Static class blocks are not enabled. Please add @babel/plugin-transform-class-static-block to your configuration.

这个错误是因为 monaco-editor 使用了静态类块（static class blocks）语法，但 Babel 配置中没有相应的插件来转换它。

接下来采取以下步骤可以解决这个bug：

1.首先需要安装 Babel 插件

在webstorm的Terminal执行以下命令：

`1`	`npm install --save-dev @babel/plugin-transform-class-static-block`

2.修改 babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    '@babel/plugin-transform-class-static-block'
  ]
}

3.修改 vue.config.js

const { defineConfig } = require("@vue/cli-service");
const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");

module.exports = defineConfig({
  transpileDependencies: true,
  chainWebpack(config) {
    config.plugin("monaco").use(new MonacoWebpackPlugin({
      languages: ['javascript', 'typescript', 'json', 'html', 'css', 'cpp', 'java', 'python']
    }));
  },
});

4.清理缓存并重启

# 删除缓存
Remove-Item -Recurse -Force node_modules\.cache -ErrorAction SilentlyContinue

# 重新运行
npm run serve

⚠️注意： 在WebStorm中开的Terminal是PowerShell形式的，格式跟普通的Terminal有差异。

TS7016-Could-not-find-a-declaration-file-for-module-‘vue-router‘.解决办法

Thu, 25 Dec 2025 15:45:44 +0000

前端初始化的时候出现这样一个错误：

ERROR in src/router/index.ts:1:64                                                                                                                                    
TS7016: Could not find a declaration file for module 'vue-router'. './node_modules/vue-router/index.js' implicitly has an 'any' type.
  Try npm i --save-dev @types/vue-router if it exists or add a new declaration (.d.ts) file containing declare module 'vue-router';
  > 1 | import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
      |                                                                ^^^^^^^^^^^^
    2 | import HomeView from "../views/HomeView.vue";

我尝试了以下方法：

# 使用 PowerShell
Remove-Item -Recurse -Force node_modules
Remove-Item package-lock.json

# 清理 npm 缓存
npm cache clean --force

# 重新安装
npm install

重新运行package.jason文件的serve仍然不行；

再次尝试新建 src/shims-vue-router.d.ts文件：

declare module 'vue-router' {
  import type { App, Component } from 'vue'

  export interface RouteRecordRaw {
    path: string
    name?: string | symbol
    component?: Component
    components?: Record<string, Component>
    redirect?: string
    alias?: string | string[]
    children?: RouteRecordRaw[]
    meta?: Record<string, any>
    beforeEnter?: NavigationGuard | NavigationGuard[]
    props?: boolean | Record<string, any> | ((to: any) => Record<string, any>)
  }

  export interface Router {
    currentRoute: any
    push(to: any): Promise<any>
    replace(to: any): Promise<any>
    go(delta: number): void
    back(): void
    forward(): void
    beforeEach(guard: NavigationGuard): () => void
    afterEach(guard: NavigationHookAfter): () => void
    install(app: App): void  // 添加这行,让 Router 可以作为 Vue 插件使用
  }

  export interface NavigationGuard {
    (to: any, from: any, next: any): any
  }

  export interface NavigationHookAfter {
    (to: any, from: any): any
  }

  export function createRouter(options: any): Router
  export function createWebHistory(base?: string): any
  export function createWebHashHistory(base?: string): any
  export function createMemoryHistory(base?: string): any
  export function useRouter(): Router
  export function useRoute(): any
}

这下可以了：

TS2307-Cannot-find-module-‘.-App.vue‘-or-its-corresponding-type-declarations解决办法

Sun, 16 Nov 2025 11:03:15 +0000

这个错误是 TypeScript（TS）无法识别 .vue 文件模块导致的，原因是缺少 Vue 相关的类型声明配置。

解决办法：

1.先执行以下命令，确保项目中已安装 Vue 核心依赖和类型声明文件：

1
2
3

# Vue 3 项目
npm install vue@3
npm install -D @vue/tsconfig @vue/runtime-core @types/node

2.添加 Vue 类型声明文件

在项目 src 目录下新建文件 shims-vue.d.ts（文件名固定，TS 会自动识别）：

// src/shims-vue.d.ts
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  // 泛型参数：Props类型、Emits类型、Slots类型（默认任意）
  const component: DefineComponent<{}, {}, any>
  export default component
}

如果觉得有帮助，欢迎点赞、关注、转发~

An-error-occurred-while-running-a-WSL-command.Please-check-your-WSL-configuration-and-try-again.解决办法

Fri, 31 Oct 2025 22:36:04 +0000

安装好Docker启动之后报这个错误：有博客说是因为没有启动【虚拟机平台】，于是我Win+r➡【optionalfeatures】，看了一下发现我的【Virtual Machine platform】是启动的，那到底是什么原因呢？

问了一下AI，说这个错误表示 Windows 的 HCS (Host Compute Service) 服务不可用。

执行了以下操作：

# 1. 启用 vmcompute 服务
sc.exe config vmcompute start=auto

# 2. 启动服务
sc.exe start vmcompute

# 3. 启用 vmms
sc.exe config vmms start=auto
sc.exe start vmms

# 4. 关闭 WSL
wsl --shutdown

然后重新启动 Docker Desktop，出现这个报错：这个错误表示虚拟化未启用。但是我打开任务管理器→ 切换到"性能"选项卡 → 点击"CPU"，底部显示 “虚拟化: 已启用”。

接下来尝试查看 Hypervisor 状态，

`1`	`bcdedit /enum \| findstr hypervisorlaunchtype`

结果显示 off，需要启用一下：

`1`	`bcdedit /set hypervisorlaunchtype auto`

重启电脑，然后再启动 Docker Desktop，问题就解决了。