vuepress打包部署到Gitee Pages访问页面出现样式丢失

电玩女神 2024-03-23 13:17 29阅读 0赞

## 一、打包部署到Gitee Pages服务后，打开网站地址页面显示如下： ##

![在这里插入图片描述][a483043818cb46998f94f15086385ad2.png_pic_center]

## 二、解决方法 ##

### 1.官方文档GitHub Pages ###

> （1）在 docs/.vuepress/config.js 中设置正确的 base。  
> 如果你打算发布到https://`<USERNAME>`.github.io/，则可以省略这一步，因为 base 默认即是 “/”。  
> （2）如果你打算发布到https://`<USERNAME>`.github.io/`<REPO>`/（也就是说你的仓库在 https://github.com/`<USERNAME>`/`<REPO>`），则将 base 设置为 “/`<REPO>`/”。

`<USERNAME>`：用户名  
`<REPO>`：仓库名称

### 2.Gitee Pages ###

> （1）Gitee Pages网站地址是`https://gitee.com/用户名/仓库名称.git`  
> （2）我的gitee仓库名是vue-press，路径：`docs/.vuepress/`，修改`config.js`配置文件在`module.exports`中添加`base: '/vue-press/'`。

![在这里插入图片描述][c9501900543c4f288f56871b1123508a.png_pic_center]

### 3.重新打包部署即可解决 ###

#### 命令： ####

npm run docs:build

## 三、图片加载失败 ##

![在这里插入图片描述][bf47f25edb22400981ef10a3dcb4eb5c.png_pic_center]

#### 1.我是放在`docs/.vuepress/public`路径 ####

![在这里插入图片描述][b492d4eafe7a478a9f57e550c1ad1d5f.png_pic_center]

#### 2.把.md文件中照片路径`"\"改成"/"`，注意最左边不要加下划线`"/"` ####

![在这里插入图片描述][b65760a6cf0643ce92d4840b52b42627.png_pic_center]  
**（1）改成**

![在这里插入图片描述][813c105e5bd64e8aa70ce89b4bfd8ff5.png_pic_center]  
**（2）重新部署上去**

**图片已加载显示**

![在这里插入图片描述][545884a779584f9a9dabc964c347d8b5.png_pic_center]

[a483043818cb46998f94f15086385ad2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/b492807f36794fcdbb2de88b24303b47.png
[c9501900543c4f288f56871b1123508a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/4379cf11dff042f2acee1d0d962c0be8.png
[bf47f25edb22400981ef10a3dcb4eb5c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/9e4a6cc1ed064d3b9d8d7e60de2b4a95.png
[b492d4eafe7a478a9f57e550c1ad1d5f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/1a2a767ca78d4640a20378b83e1315f1.png
[b65760a6cf0643ce92d4840b52b42627.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/3c42cf877f90449b9a04e118b661b595.png
[813c105e5bd64e8aa70ce89b4bfd8ff5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/418345b5b0fe419ba7d6ab7397fbee92.png
[545884a779584f9a9dabc964c347d8b5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/956007832df0473ba866b10ecd41881f.png