动态配置Vite的base选项


有的时候项目需要部署在服务器的子目录下,这时就要根据开发环境或生产环境动态配置 vite.config.ts 中的 base 选项。
查看vscode的TS类型提示:

可以发现:defineConfig接收一个UserConfig对象,或者一个返回UserConfig对象的函数,这个函数接收一个ConfigEnv对象作为参数,ConfigEnv的类型声明如下:

command 属性一共有两个值 buildserve,对应了 package.json 定义的脚本名称,分别为构建生产版本和开启开发服务。可以通过解构并判断 command 的值,来动态给base赋值,代码如下:

export default defineConfig(({ command }) => {
  // 根据command动态配置base
  let base: string
  if (command === 'build') {
    base = '/jxxt/'
  } else {
    base = '/'
  }

  // 返回 UserConfig
  return {
    base,
    ...{ otherOptions },
  }
})

这个时候就可以根据我们的命令动态配置 base 了。

PS: 也可以根据 ConfigEnv 中的 mode 属性来判断,但是这个属性没有类型约束,需要确定拼写正确。


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM