vite2+vue3在github部署静态页面操作方法

路径设置

要在 vite.config.ts 中设置 base ,这是我在部署后页面出现404的解决方案。

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import Icons from "unplugin-icons/vite";

// https://vitejs.dev/config/
export default defineConfig(
  {
    base: "./",
    plugins: [
      vue(),
      Icons({
        compiler: "vue3",
        autoInstall: true,
      }),
    ],
    build: {
      rollupOptions: {
        input: "/index.html",
      },
    },
  }

  // server: {
  //   // hmr: true,
  // },
);

1. 发布你本地项目的代码

1. 手动发布

npm run build
cd dist
git init
git add -A
git commit -m "deploy"
git remote add origin xxxxxxxxxx
git push -f origin master:gh-pages

2. 使用gh-pages插件发布

npm install gh-pages -D

在package.json的scripts中加入

    "predeploy":"npm run build", 
    "deploy":"gh-pages -d dist -b gh-pages"
    //发布
    npm run deploy

1. 点击settings

2. 选择pages

3. 发布页面