vue项目，多个子项目，添加一级路径前缀的方法

mini云码 发布日期： 2026-01-17 08:41

很多公司，多个子模块，不是同一个团队开发，于是模块的代码也就不在同一个代码仓库里。所以不同模块打包和发布都是独立的，而不同的模块生成的dist文件夹的内容，就不能都放在nginx的html的根目录下，需要使用二级目录存放。

这个很多人都能理解，发布到服务端的nginx下的html的时候，或者打包docker镜像的时候，创建在html目录下创建子文件夹，比如module1,modul2，用来存在打包的dist文件夹的内容。

假如你的vue项目是使用hash路由的话，访问子模块的访问方式就是:https;//你的域名/module1/#/

而打包的时候，需要修改成使用相对路径：

// vue.config.js
module.exports = {
  // 输出文件目录 默认就是dist, 可以不用配置
  // outputDir: './dist',
  // 打包生成的静态资源 (js、css、img、fonts) 的目录
  assetsDir: './assets',
  // 基本路径
  publicPath: './',
}

这样生成的代码，就是使用相对路径引用的，比如<link href="./assets/xxxxxxxx.css" rel="stylesheet" type="text/css"/>，而不是<link href="/assets/xxxxxxxx.css" rel="stylesheet" type="text/css"/>

这一点很重要，假如通过绝对路径斜杠开头引用静态文件，就执行根目录了，而不是子目录。