使用 gitee 部署 Vue 静态页

快来打我* 2022-11-05 05:28 308阅读 0赞

打包之前需要配置 publicPath，在 package.json 的同级目录新建 vue.config.js，并添加以下代码，防止打包后页面空白

module.exports = { 
        publicPath: "./"
    }

打包 vue 项目

npm run build

访问 [gitee][] 官网，新建仓库  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY0MDMyMw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY0MDMyMw_size_16_color_FFFFFF_t_70 1]  
进入仓库，复制地址  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY0MDMyMw_size_16_color_FFFFFF_t_70 2]  
本案例采用 TortiseGit 拉取项目，如没有安装，请自行下载，需安装 [git][] 和 [TortiseGit ][TortiseGit]，安装成功后，在桌面右键点击 Git 克隆  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY0MDMyMw_size_16_color_FFFFFF_t_70 3]  
URL 粘贴仓库地址，勾选递归，确定拉取 gitee 项目  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY0MDMyMw_size_16_color_FFFFFF_t_70 4]  
拉取成功后把打包的Vue项目中的 dist 文件夹放该文件内  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY0MDMyMw_size_16_color_FFFFFF_t_70 5]  
在根目录上右键点击 Git 提交，提交成功后推送，如需登录请输入 gitee 用户名密码登录即可  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY0MDMyMw_size_16_color_FFFFFF_t_70 6]  
返回 gitee，点击 gitee Pages  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY0MDMyMw_size_16_color_FFFFFF_t_70 7]  
部署目录填写 dist，会生成页面地址 http://tianmeng1603.gitee.io/git-pages  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY0MDMyMw_size_16_color_FFFFFF_t_70 8]

[gitee]: https://gitee.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY0MDMyMw_size_16_color_FFFFFF_t_70]: /images/20221023/ead7eddce4be4c6e8b451f4b3c1b82d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY0MDMyMw_size_16_color_FFFFFF_t_70 1]: /images/20221023/db127203cf744627b8d9ebe8b7a5a063.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY0MDMyMw_size_16_color_FFFFFF_t_70 2]: /images/20221023/a6b4f2969cca411ca7522091fde3978f.png
[git]: https://git-scm.com/download/win
[TortiseGit]: https://download.tortoisegit.org/tgit/2.11.0.0/TortoiseGit-2.11.0.0-64bit.msi
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY0MDMyMw_size_16_color_FFFFFF_t_70 3]: /images/20221023/9c33bf80eb7a4b3598fd614e2442996d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY0MDMyMw_size_16_color_FFFFFF_t_70 4]: /images/20221023/b41dd40f79d140eca9951377c98019f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY0MDMyMw_size_16_color_FFFFFF_t_70 5]: /images/20221023/220702cd125f439fbada2c6ac98b9046.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY0MDMyMw_size_16_color_FFFFFF_t_70 6]: /images/20221023/1b99cca7c4cd419abbb62ceddfef0199.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY0MDMyMw_size_16_color_FFFFFF_t_70 7]: /images/20221023/b548067b8c9a4cf7bdcffe5544e0073b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY0MDMyMw_size_16_color_FFFFFF_t_70 8]: /images/20221023/129d281c951b45da941318c3a7d78827.png