桐城市建设局网站,门户网站建设情况调研报告,怎样构建网站,网站开发广告宣传背景
上周看到一本开源书 《深入架构原理与实践》#xff0c;是基于 vuepress 搭建的#xff0c;下载了源码#xff0c;本地部署了一下#xff0c;本文记录如何打包该源码遇到的路径问题及思考。
结论#xff1a; vuepress 插件的 sideBar 的菜单路径默认是相对 / 的是基于 vuepress 搭建的下载了源码本地部署了一下本文记录如何打包该源码遇到的路径问题及思考。
结论 vuepress 插件的 sideBar 的菜单路径默认是相对 / 的并且是由 .vuepress/config.js 的 base 属性控制打包时需要按需要修改开发环境下不能设置。
环境准备
node 18.0.0版本过低的话需要先安装版本管理工具 n 再执行 n 18.0.0 安装合适的版本。yarnTomcatGit
下载源码执行安装和打包操作
git clone https://github.com/isno/theByteBook.git cd theByteBookyarn installyarn devyarn build
直接用源码打包后在 .vuepress 目录下生成 dist 文件夹就是开源书《深入架构原理与实践》的静态资源。
应用部署
该项目默认的静态文件路径是相对于 / 的直接将 build 后的静态目录 dist 放到 tomcat/webapps 下访问会出现 404页面的静态资源路径都不正确有两种解决方法。
第一种直接把 dist 重命名为 ROOT 作为 tomcat 的根应用后就能正常访问了。 第二种修改 vue 打包路径的 publicpath 和 vuepress 配置的 base 属性。
第一步在工程的根目录、与 package.json 同级别的目录下创建一个名为 vue.config.js 的打包配置文件输入配置内容
module.exports {publicpath: ./,assetsdir: static,parallel: false
}第二步进入 .vuepress 目录修改 config.js 在配置开头添加一个 base 属性感谢《这篇文章》 的启发试了一下果然可以。
重新执行 yarn build 打包后直接将 dist 放到 tomcat 的 webapps 下访问首页正常
个人思考
第一点是关于 vuepress 插件的它配置的 sideBar 的菜单路径默认是相对 / 的它是由 .vuepress/config.js 的 base 属性控制的
如果应用部署的时候不是 ROOT 根目录的话就需要配置这个路径与发布的应用目录名称一致这里是 dist 第二点用 vuepress 搭建个人博客还是挺不错的一个配置文件就搞定了只需要专注编写内容的 md 文件想到一个用途就是用它来搭建知识文档库。
