[筆記] VS Code 搭配 Nuxt3 解決 /.well-known/appspecific/** 問題 @地瓜大的飛翔旅程

章節連結

內容

2025 年 5 月初開始，若是使用 Google Chrome 瀏覽器搭配 VS Code 開發網頁時，會在終端機內看到 /.well-known/appspecific/* 的提示訊息。這是由於 Chromium DevTools tool 於 135 版本後自動開啟 Automatic Workspaces Folders 功能所導致。

內容

解決方法很多種，不外乎是在 nuxt.config.{ts,js} 新增設定、在 Nuxt 專案的 server 資料夾下新增 Plugin 或是加入一個自定義的 Vite Plugin… 。至於從 Google Chrome 的 about:flags 中關閉也可以。

詳情可見 Github 上的討論：https://github.com/nuxt/nuxt/issues/31978

以下筆記下較為便捷的方案：

Nuxt.config.ts 新增

nitro: {
    routeRules: {
      '/.well-known/appspecific/**': {
        headers: { 'cache-control': 'max-age=31536000' },
        redirect: { to: '/', statusCode: 404 }
    }
  }
}

nitro: {

routeRules: {

'/.well-known/appspecific/**': {

headers: { 'cache-control': 'max-age=31536000' },

redirect: { to: '/', statusCode: 404 }

}

Vite Plugin

vite-plugin-devtools-json

// nuxt.config.ts
import devtoolsJson from 'vite-plugin-devtools-json'

// ...
  vite: {
    // ...
    plugins: [
      // ...
      // Only include devtools plugin in development
      ...(process.env.NODE_ENV === 'development' ? [devtoolsJson()] : []),
    ],
  },

// nuxt.config.ts

import devtoolsJson from 'vite-plugin-devtools-json'

// ...

vite: {

// ...

plugins: [

// ...

// Only include devtools plugin in development

...(process.env.NODE_ENV === 'development' ? [devtoolsJson()] : []),

建立自訂 Vite Plugin

{
      name: 'custom-middleware',
      configureServer(server) {
        server.middlewares.use((req, res, next) => {
          if (req.url?.startsWith('/.well-known')) {
            res.statusCode = 404;
            return res.end('Not Found');
          }
          next();
        });
      },
    },