❌

普通视图

发现新文章，点击刷新页面。
昨天 — 2025年4月16日首页

Permission denied"如何解决？详解GitHub SSH密钥认证流程

✇掘金 前端
作者 小七_雪球
2025年4月16日 14:57

"当你满心欢喜运行deploy.sh部署Vue项目到GitHub Pages，却突然看到： git@github.com: Permission denied (publickey).
本文将从零教你配置SSH密钥，彻底解决此类权限问题。"

  1. 核心流程

    1. 检查本地是否存在 SSH 密钥:

      • 打开你的终端，并执行以下命令（通常在你的用户主目录下）：
      ls -al ~/.ssh  # 查看是否存在id_rsa（私钥）和id_rsa.pub（公钥）这样的文件。
#`id_rsa`：**私钥文件**（Private Key），必须严格保密，相当于你的"密码"。
#`id_rsa.pub`：**公钥文件**（Public Key），可公开，用于配对验证，相当于"锁"。
      • 如果找不到 id_rsa 和 id_rsa.pub 文件: 说明你还没有生成 SSH 密钥对，需要按照下面的步骤 2 生成。
      • 如果找到了这些文件: 请跳到步骤 3，将你的公钥添加到 GitHub。

    2. 生成新的SSH密钥对 (如果需要):

      • 生成命令（含注释）：
      ssh-keygen -t rsa -b 4096 -C "your_email@example.com"  
# -t 指定密钥类型，-b 指定密钥长度，-C 添加注释（建议用你的 GitHub 账户关联的邮箱地址）
      • 交互提示中可直接回车使用默认路径（~/.ssh/id_rsa），也可以自定义路径。
      • 可选设置密钥密码（增加安全性，但自动化部署时可能需额外配置）。如果设置了密码，请记住这个密码。

    3. 将SSH 公钥添加到你的 GitHub 账户:

      1. 复制公钥内容: 使用以下命令将你的公钥复制到剪贴板（如果你的公钥文件名不是 id_rsa.pub，请替换成你的文件名）：
        • macOS: 
          pbcopy < ~/.ssh/id_rsa.pub
        • Linux (需要 xclip): 
          xclip -sel clip < ~/.ssh/id_rsa.pub
          如果 xclip 没有安装，可以使用 cat 命令并手动复制： 
          cat ~/.ssh/id_rsa.pub
        • Windows (可以使用 clip 命令): 
          clip < ~/.ssh/id_rsa.pub
          或者使用文本编辑器打开 ~/.ssh/id_rsa.pub 文件并手动复制内容。
      2. 添加到 GitHub: 
        * 登录你的 GitHub 账户。
* 点击右上角的头像，然后选择 "Settings"。
* 在左侧边栏中，点击 "SSH and GPG keys"。
* 点击 "New SSH key" 或 "Add SSH key"。
* 在 "Title" 字段中，为你的密钥添加一个描述性的名称（例如，"My Laptop"）。
* 在 "Key" 字段中，粘贴你刚刚复制的公钥。
* 点击 "Add SSH key"。如果提示，输入你的 GitHub 密码进行确认。

    4. 测试 SSH 连接:

      • 验证命令：
      ssh -T git@github.com  
# 成功会显示"Hi username! You've successfully authenticated, but GitHub does not provide shell access."
      • 如果仍然出现 "Permission denied (publickey)" 错误，请仔细检查以下几点：
        • 你是否将正确的公钥（以 .pub 结尾的文件内容）添加到了 GitHub？
        • 你的本地 SSH 密钥对是否存在，并且私钥 (id_rsa 或你自定义的文件名) 位于 ~/.ssh 目录下？
        • 如果你的私钥有密码，SSH agent 是否正在运行并且已经添加了你的私钥？你可以尝试添加私钥到 SSH agent(如果提示agent refused operation，需先启动ssh-agent): 
          eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_rsa  # 如果你的私钥文件名不同，请替换

    5. 确保你的 Git 远程仓库 URL 使用 SSH:

      检查你的项目 .git/config 文件中的 remote "origin" url 是否是以 git@github.com: 开头。如果不是，你需要将其更改为 SSH URL。

      查看远程仓库 URL：

      git remote -v

      如果输出的 URL 是 https://github.com/<USERNAME>/<REPO>.git 这种 HTTPS 形式，你需要将其更改为 SSH 形式：

      git remote set-url origin git@github.com:<USERNAME>/<REPO>.git

      再次运行 git remote -v 确认 URL 已经更改。

  2. 密钥安全建议：
    • 切勿将id_rsa文件上传到Git仓库或公开位置。
    • 定期轮换密钥（GitHub支持多密钥共存，删除旧密钥即可）。

十分钟搞定Vue2项目双平台部署：GitHub Pages+Vercel配置详解

✇掘金 前端
作者 小七_雪球
2025年4月16日 13:49

当你用@vue/cli5构建的Vue2项目在本地运行完美，但部署到GitHub Pages或Vercel上发现页面空白... 问题出在哪？

本文将手把手教你同一套代码适配两大平台，解决静态资源路径这一核心问题。

  1. 前置准备
  • 环境要求：
    • @vue/cli 5.x, vue 2.x
    • GitHub账号/Vercel账号
  1. 核心部署步骤
    1. 对比双平台的publicPath差异（GitHub Pages需子路径，Vercel需根路径），动态配置静态资源路径
      • 关键配置：
        • 修改vue.config.js 
        const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: (() => {
    if (process.env.NODE_ENV === 'production') {
      if (process.env.DEPLOY_TARGET === 'github-pages') {
        return '/weather-app/'
      } else if (process.env.DEPLOY_TARGET === 'vercel') {
        return '/'
      }
    }
    return '/' // 默认开发环境
  })()
})
    2. GitHub Pages适配
      • 自动化部署脚本
        • 添加deploy.sh脚本
        #!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run build

# 进入生成的文件夹
cd dist

# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 强制推送 dist 文件夹的内容到 gh-pages 分支
git push -f git@github.com:<USERNAME>/<REPO>.git HEAD:gh-pages

# 返回到项目根目录
cd -
        • 在package.json中添加deploy命令
        {
    // ...,
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint",
        "deploy": "DEPLOY_TARGET = github-pages bash deploy.sh"
      },
    // ...
}

        • 运行: npm run deploy

        • 启用 GitHub Pages

          • 进入你的 GitHub 仓库页面。
          • 点击 "Settings" 选项卡。
          • 在左侧边栏中，找到 "Code and automation" 部分，点击 "Pages"。
          • 在 "Source" 部分，选择 "Branch"。
          • 在下拉菜单中选择 gh-pages 分支。
          • 点击 "Save"。

          GitHub Pages 会开始构建并部署你的网站。通常，几分钟后你就可以通过 https://<USERNAME>.github.io/<REPO_NAME> 访问你的网站了。

    3. Vercel适配
      • 部署流程 （通过Vercel CLI关联Git仓库自动部署）
        1. 登录 Vercel (vercel.com)
        2. 点击 "New Project"
        3. 选择你的 GitHub 仓库
        4. 配置设置：
          • Framework Preset: Vue.js
          • Build Command: DEPLOY_TARGET = vercel npm run build
          • Output Directory: dist
        5. 点击 Deploy
    4. 效果验证与调试
      • GitHub Pages：
        • 访问 https://username.github.io/repo-name
        • 检查Chrome开发者工具Network面板，确认资源加载无404。
      • Vercel：
        • 访问自动生成的vercel.app域名，确认资源加载无404。

GitHub Pages+Vercel双部署？小心publicPath/base让你前功尽弃！

✇掘金 前端
作者 小七_雪球
2025年4月16日 13:10
  1. 问题现象
  • 本地做了两个项目，将项目推送到github中，想要同时部署在github pages和vercel上。结果第一个项目在github pages上可以正常访问，在vercel上访问失败。另一个项目在vercel上可以正常访问，在githubpages中却访问失败。报错内容都是访问时CSS加载失败。 image.png
  • 一通研究，发现是publicPath/base搞的鬼。
    • 我的第一个项目是使用vite+vue3+element ui搭建的To-Do List项目，刚开始在vite.config.js中设置了base，为了方便在Github Pages上部署。
    // vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    plugins: [vue()],
    base: '/vue-todo-list/'
})
    • 我的第二个项目是使用vue2和@vue/cli5搭建的天气展示项目。在vue.config.js根据NODE_ENV动态设置了publicPath的值。
    // vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: process.env.NODE_ENV === 'production' 
    ? '/weather-app/' 
    : '/'
})
  1. 原理分析
  • 在 GitHub Pages 或Vercel上项目空白的问题，很可能是因为构建的静态资源路径与 GitHub Pages 或Vercel的部署方式不匹配导致的。
    • 不同项目对于如何处理静态资源路径问题的配置方式不同
      • Vue CLI 项目通常在 vue.config.js 文件中配置 publicPath 。
      • Vite 项目通常在 vite.config.js 文件中配置 base 。
    • 不同平台的部署方式不同
      • GitHub Pages通常将项目部署到项目仓库子目录下，此时需要将publicPath或base设置为 /<REPO_NAME>/。
      • Vercel通常将项目部署到根目录下，此时需要将publicPath或base设置为 /。
      • 在开发环境下，通常是 /。
    • 需要设置正确的 publicPath或base，以便 GitHub Pages和Vercel 都能够正确地找到CSS、JavaScript、图片等静态资源。
  1. 解决方案
  • 动态配置publicPath或base（环境变量+条件判断）。
    • Vite项目
      1. 修改vite.config.js，根据DEPLOY_TARGET是否为'github-pages'来决定base的值
       // vite.config.js
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'

 const isGitHubPages = process.env.DEPLOY_TARGET === 'github-pages'
 const base = isGitHubPages ? '/vue-todo-list/' : '/'

 export default defineConfig({
   plugins: [vue()],
   base
 })
      1. 修改package.json，在部署到Github-pages上需要执行的"deploy"命令中添加DEPLOY_TARGET=github-pages。相当于在部署到Github-pages前先修改DEPLOY_TARGET的值。
       // package.json
 {
  // ...,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "deploy": "DEPLOY_TARGET=github-pages npm run build && gh-pages -d dist"
  },
  // ...
}
    • Vue CLI项目
        1. 修改vue.config.js，根据NODE_ENV以及DEPLOY_TARGET的值来决定publicPath的值
         // vue.config.js
   const { defineConfig } = require('@vue/cli-service')
   module.exports = defineConfig({
     transpileDependencies: true,
     publicPath: (() => {
       if (process.env.NODE_ENV === 'production') {
         if (process.env.DEPLOY_TARGET === 'github-pages') {
           return '/weather-app/'
         } else if (process.env.DEPLOY_TARGET === 'vercel') {
           return '/'
         }
       }
       return '/' // 默认开发环境
     })()
   })
      1. 修改package.json，在部署到Github-pages上需要执行的"deploy"命令中添加DEPLOY_TARGET=github-pages。相当于在执行build命令前先修改DEPLOY_TARGET的值。
       // package.json
 {
  // ...,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "deploy": "DEPLOY_TARGET = github-pages bash deploy.sh"
  },
  // ...
 }
      1. 在Vercel里的Build and Deployment Setting中修改Build Command，在npm run build之前添加DEPLOY_TARGET=vercel。相当于在执行build命令前先修改DEPLOY_TARGET的值。Framework Preset选择了Vue.js时，点击Build Command右侧的Override即可修改。 image.png
昨天以前首页
❌
❌