问题描述

最近打算使用vuepress为公司项目集成一下前端开发文档,在打包的时候遇到了样式丢失的问题,在网络上参考了一些解决方案,记录一下自己遇到的问题,有什么不足的地方多多指教。

  1. 集成打包之后,打开入口文件展示页面如下:
    样式丢失问题
    样式丢失问题

  2. 在本地直接运行的页面是没有问题的,如图,只是打包之后样式丢失:
    本地运行项目

  3. 关于打包的dist文件目录结构如下:

dist
    │  404.html
    │  index.html // 入口文件
    │
    ├─assets
    │  ├─css
    │  │      0.styles.3294b3f2.css
    │  │
    │  ├─img
    │  │      search.83621669.svg
    │  │
    │  └─js
    │          2.733019b2.js
    │          3.b92b6444.js
    │          4.fc333d27.js
    │          5.d58e9858.js
    │          6.2d0a63f8.js
    │          7.9c9172a7.js
    │          8.9e1014e2.js
    │          app.972414f3.js
    │
    └─guide
            index.html

解决方案

解决方案有两种,可以自行选择,vuepress我安装的版本如下,vuepress的路由模式写的是history模式,所以解决方案主要是面向两种不同模式(hash / history)

   "vuepress": "^1.9.9"  // 我安装的时候最新版本是1.9.9,^符号表示每次install都升级到最新版本
方案一 hash模式
  1. 修改依赖文件更改路由模式:在依赖文件夹node_modules下找到@vuepress,打开如图所示的app.js文件夹,将文件夹中的mode:history注掉,使用默认的hash模式
    修改文件
    注释代码
  2. 修改vuepress的config.js文件,主要更改的是base的这个配置项,base配置项在官网已经说得很明白了,可以去看一下,由于配置的默认base是’/‘即根目录,从根目录直接读取样式文件自然是找不到的,所以在这里改成相对路径’./’
    config.js文件

module.exports = {
  title: '开发文档',
  description: '开发文档',
  base: './', // 使用相对路径,读取相对路径下的静态文件
};

  1. 打包,本地访问入口文件,样式没有丢失的问题,发布到服务器上样式也正常,问题解决。
    在这里插入图片描述
    在这里插入图片描述
方案二 history模式

考虑到在实际开发中,多人维护文档,每个人都去改vuepress的路由模式有点麻烦,所以只需要修改config.js文件的base配置项即可


module.exports = {
  title: '开发文档',
  description: '开发文档',
  base: '/project-docs/', // project-docs可以随意更改,主要看自己的文件放在服务器上的文件路径 
};

比如nginx配置的location如下, 那么我们通过服务端口去访问的时候,找的是根目录html下的project-docs文件夹读取对应的静态文件

location /project-docs {
            root html;
            index index.html index.htm;
        }

修改完成后直接进行打包,在本地访问index.html还是会样式丢失的,但是问题不大,放上服务器后就可以正常访问了。
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐