将umi项目部署到gitee page

深藏阁楼爱情的钟 2022-12-26 09:12 153阅读 0赞

# 将umi项目部署到gitee page #

#### **1. 首先保证在yarn start后能正常运行。并且已经关联了远程仓库比如gitee的。** ####

![D7cVyT.png][]

#### **2. 安装** gh-pages ####

yarn install gh-pages --dev

#### **3. 修改umirc.ts** ####

import {  defineConfig } from 'umi';
    
    export default defineConfig({ 
      nodeModulesTransform: { 
        type: 'none',
      },
      title: '全屏页面测试',
      targets: { 
        ie: 11,
      },
      routes: [{  path: '/', component: '@/pages/_layout/index' }],
      outputPath: 'build',
      //publicPath: './',
      publicPath: 'http://bill_xiao.gitee.io/fullpage-demo/',
      history: {  type: 'hash' },
    });

主要修改下面几个地方

/** umi的打包路径要修改，因为gh-pages默认是发布build文件夹下的内容， 而umi默认的打包目录是dist */
      outputPath: 'build',
      
    /** 静态资源的访问路径要改变，如果想要本机打开index.html直接能访问，就改成'./' 如果要发布在gitee，就改成发布的网址 一般可以在下面那张图片的地方查看 记得要以 / 结尾 注意，这里修改静态资源路径之后，yarn start之后的路径也会被改变， 所以这里最好区分生产和开发环境 */  
    //publicPath: 'http://bill_xiao.gitee.io/fullpage-demo/', 
    publicPath:
        env === 'development' ? './' : 'http://bill_xiao.gitee.io/fullpage-demo/',
    
    /** 路由要改成 hash路由，不然打开页面也是空白的。 在发布到gitee之前，可以先用 ./ 打包，在本地试试， 看看打开index.html有没有效果 */  
    history: {  type: 'hash' },

[![D7cr1P.png][]][D7cr1P.png 1]

#### **4. 修改package.json** ####

修改package.json，增加发布分支命令

"scripts": { 
        "start": "umi dev",
        "build": "umi build",
        "postinstall": "umi generate tmp",
        "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
        "test": "umi-test",
        "test:coverage": "umi-test --coverage",
        // 下面新增发布命令
        "deploy": "gh-pages -d build",
        "homepage": "./"
      },

#### **5. 打包+发布分支** ####

**运行 yarn run build 打包**

**运行 yarn run deploy**

之后就可以在远程仓库看到一个新的 gh-pages分支。  
![D7cOAJ.png][]

#### **6. 部署** ####

选择 服务-> gitee pages  
![D7cOAJ.png][]  
部署分支选择刚刚生成的分支 ：gh-pages  
![D7cz1x.png][]  
点击 部署或者更新，等待进度完毕之后，就能在上面的网址看到效果了。

> 注：如果以前部署失败过，记得清除一下浏览器缓存。

![D7gQHg.png][]

[D7cVyT.png]: /images/20221120/dab1e36db28d477495024c9d99eb0343.png
[D7cr1P.png]: /images/20221120/91765b2dadd64ffba2714c7ad55da079.png
[D7cr1P.png 1]: https://imgchr.com/i/D7cr1P
[D7cOAJ.png]: /images/20221120/abf0d209acf241659eaae8e58362c1fc.png
[D7cz1x.png]: /images/20221120/dda6e231ffab43dfaebcf80db0aa51c6.png
[D7gQHg.png]: /images/20221120/ecb8787555004a1db96990cf5fbb9b48.png