astro基于相对路径进行部署

27天前

#astro

1

前言

  • 最近碰到一个挺奇怪的需求，场景如下：已有一个项目部署在根目录/下，现需要在/blog路径下再部署另外一个astro项目，配置过程也是让我搞了一上午，在此记录一下配置过程以备忘。

开发环境

  • "astro": "4.0.8"

配置内容

astro项目配置文件

  • 转到./astro.config.mjs
  • 配置如下三个属性
export default defineConfig({
  build: {
    assetsPrefix: '/blog/'
  },
  base: '/blog',
	trailingSlash: "never",
})
  • assetsPrefix：用于让astro在build过程中将静态资源的引用路径前缀改为该属性值，如默认的话是直接引用/根目录下的文件，而配置后则是引用/blog/路径下的静态资源
  • base：Astro 将在开发和生产构建中使用此路径作为页面和资产的根。用于让开发环境与部署环境保持一致，如原来开发环境首页为http://localhost:4321,配置后变为http://localhost:4321/blog，其余页面也都在http://localhost:4321/blog的子路径下，其它静态资源的引用路径也会被更改到/blog路径下
  • trailingSlash： 用于处理尾部斜杠，决定了import.meta.env.BASE_URL的值是否带斜杠
    • 'always' - Only match URLs that include a trailing slash (ex: “/foo/“)
    • 'never' - Never match URLs that include a trailing slash (ex: “/foo”)
    • 'ignore' - Match URLs regardless of whether a trailing ”/” exists

代码中要注意的

  • 链接改为${import.meta.env.BASE_URL}/post/的形式，使其在部署环境能够定向到正确的地址
  • 链接末尾需要带一个斜杆，否则实际部署发现不带/的链接会被重定向到奇怪的地方

Github登录