关于vuepress部署出现样式的问题及解决

 更新时间:2022年09月19日 10:56:28   作者:我yi癫狂  
这篇文章主要介绍了关于vuepress部署出现样式的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vuepress部署出现样式问题

以前在安装hexo的时候出了样式问题,现在用vuepress也出现了相同的问题。

本地测试完全可以

然而打包之后就彻底乱了

即使是自己本地打包成dist之后也会出现相同的问题

有点困扰,应该是打包配置的问题

通过修改index.html里的内容。将/改为./

发现部分样式恢复,可以推断是打包的时候全部是绝对路径,而本应该是相对路径

最后通过加群,问群里的大佬,终于知道了问题的关键的的确确是这个base的配置问题

由于我根目录下加了其他东西所以没有把打包后文件放在根目录里而是放在根目录的blog文件夹下,所以base必须改

改成什么呢,就是你根目录下的打包文件名,我这里是blog(网站根目录下)

所以base改成

"base": "/blog/"

这样就不会出现样式问题了

同理在网上的部署也是如此

(所以最好部署在根目录下,这样才省事,base就不用改了)

vuepress个人博客部署遇到的一些问题

搭建vuepress比较简单,按vuepress官方网站一步步搭建就可以了,搭建过程比较顺利,主要是在部署阶段出现的一些问题和大家分享一下

1、js和css出现404问题

出现404的原因主要是部署到网络环境的时候,由于没有找到js和css的根路径,因此不管项目是否在【git账号名】github.io的这仓库中,我们都需要在搭建vuepress时加上“base”,即根路径。

在config.js添加base,base中的路径是你仓库的名字

module.exports = {
    base:"/blog/",
    /*其他业务代码*/
}

重新打包运行,问题解决。

2、每次都要重复操作打包、运行、上传github很麻烦怎么办?

打包要npm,上传github需要add、commit、push,那如果每次修改都要重复这几个步骤,就会很麻烦,所以可以对着几个操作步骤打包一下,做成一个自动运行的脚本,每次只要运行这个脚本,就可以一次性执行完打包、运行、上传github的动作了。

首先,在项目中建立一个的shell脚本文件,即.sh后缀的文件

然后,把执行命令放入脚本文件中

set -e
npm run build
cd docs/.vuepress/dist
 
git init
git add -A
git commit -m 'deploy'
 
git push -f "仓库地址" master
cd -

在命令行中运行shell脚本sh deploy.sh,就可以自动打包,上传了

3、github.io无法打开怎么办?

开始的时候,github.io还是可以正常访问的,当时过了几天之后

自己的手机和电脑就是打不开,用有些人的手机和电脑就可以打开,不知道是不是被屏蔽,到现在依然没有解决这个问题。

既然github打不开,而且一时半会也找不到原因,那就换一种方法,那就是用码云来代替github,其实码云也挺方便的,直接把github中的项目导入进来,然后开启gitee pages服务,码云就可以自动给我们把项目部署到网上。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue实现登录时滑块验证

    vue实现登录时滑块验证

    这篇文章主要为大家详细介绍了vue实现登录时滑块验证,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Vue项目移动端滚动穿透问题的实现

    Vue项目移动端滚动穿透问题的实现

    这篇文章主要介绍了Vue项目移动端滚动穿透问题的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • vue属性props默认类型的写法介绍

    vue属性props默认类型的写法介绍

    这篇文章主要介绍了vue属性props默认类型的写法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 基于vue--key值的特殊用处详解

    基于vue--key值的特殊用处详解

    这篇文章主要介绍了基于vue--key值的特殊用处详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue使用input封装上传文件图片全局组件的示例代码

    vue使用input封装上传文件图片全局组件的示例代码

    实际开发过程中,我们经常遇见需要上传文件图片功能,可以封装一个全局组件来调用,这篇文章给大家介绍vue使用input封装上传文件图片全局组件,感兴趣的朋友跟随小编一起看看吧
    2023-11-11
  • vue-cli5搭建vue项目的实现步骤

    vue-cli5搭建vue项目的实现步骤

    本文主要介绍了vue-cli5搭建vue项目的实现步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • Element Carousel 走马灯的具体实现

    Element Carousel 走马灯的具体实现

    这篇文章主要介绍了Element Carousel 走马灯的具体实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • Vue实现图书管理小案例

    Vue实现图书管理小案例

    这篇文章主要为大家详细介绍了Vue实现图书管理小案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • vue数组对象排序的实现代码

    vue数组对象排序的实现代码

    这篇文章主要介绍了vue数组对象排序的实现代码,这里整理了详细的代码,非常具有实用价值,需要的朋友可以参考下
    2018-06-06
  • vue如何实现自定义步骤条

    vue如何实现自定义步骤条

    这篇文章主要介绍了vue如何实现自定义步骤条问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12

最新评论