部署SvelteKit站点到Vercel时遭遇npm 401认证问题

我通过npm create svelte@latest my-app创建项目并推送到仓库后，部署到Vercel完全正常。但添加DaisyUI和Tailwind CSS依赖、执行npm install后，部署开始报错，错误提示包含npm ERR! code E401、Unable to authenticate, need: Basic realm="npm"的npm认证失败信息。

以下是项目配置文件：

package.json #

{
    "name": "reactive-tut-site",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "dev": "vite dev",
        "build": "vite build",
        "preview": "vite preview",
        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
    },
    "devDependencies": {
        "@sveltejs/adapter-auto": "^2.0.0",
        "@sveltejs/kit": "^1.5.0",
        "autoprefixer": "^10.4.14",
        "postcss": "^8.4.23",
        "svelte": "^3.54.0",
        "svelte-check": "^3.0.1",
        "tailwindcss": "^3.3.2",
        "tslib": "^2.4.1",
        "typescript": "^5.0.0",
        "vite": "^4.3.0"
    },
    "dependencies": {
        "daisyui": "^2.51.6"
    },
    "type": "module"
}

Svelte配置文件 #

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: vitePreprocess(),
    vite: {
        optimizeDeps: {
          entries: []
        }
      },
    kit: {
        adapter: adapter()
    }
};

export default config;

解决方法 #

• 进入Vercel项目的「设置」-「环境变量」，检查是否存在NPM_AUTH_TOKEN，若有直接删除该变量（公共npm包无需私有认证token）
• 检查本地项目根目录是否有.npmrc文件，若文件配置了私有npm仓库或认证信息，删除文件或修改为默认公共源registry=https://registry.npmjs.org/
• 在Vercel部署页面，选择「重新部署」并勾选「清除构建缓存」后执行部署
• 本地操作：删除node_modules文件夹和package-lock.json文件，重新执行npm install，提交更改后推送到仓库，再触发Vercel部署

内容的提问来源于stack exchange，提问作者Siddharth Sharma