如何构建可适配任意部署路径的Vue.js项目？

一、生成通用构建包的方法 #

完全可以生成适配任意部署路径的通用构建包，无需每次更换路径都重新构建，核心通过相对路径配置和动态路由适配实现：

1. 配置相对路径的publicPath
   在vue.config.js（Vue CLI项目）中设置publicPath为相对路径，让所有静态资源引用基于当前页面所在路径：

module.exports = {
  publicPath: './'
}

这会让打包后的JS、CSS、图片等资源都使用相对路径引用，而非固定的根路径/。

2. 动态设置路由base
   如果使用history路由模式，为避免跳转404，需动态获取当前部署路径作为路由的base：
   在main.js中修改路由初始化代码：

import VueRouter from 'vue-router'
import routes from './routes'

// 提取当前页面的部署根路径
const basePath = window.location.pathname.replace(/\/[^\/]*$/, '')

const router = new VueRouter({
  mode: 'history',
  base: basePath,
  routes
})

若使用hash模式，无需额外配置，天然支持任意路径部署。

3. 规范静态资源引用
   代码中所有静态资源（图片、字体等）都使用相对路径引用，例如：

<img src="./assets/logo.png" alt="logo">

避免使用/assets/logo.png这类绝对路径。

二、Docker的作用 #

Docker本身不直接解决路径适配问题，但可以简化部署流程，让通用构建包的部署更灵活：

1. 打包通用镜像
   将构建好的通用包（已配置相对路径）和Nginx配置文件一起打包成Docker镜像。Nginx配置示例（nginx.conf）：

server {
  listen 80;
  server_name localhost;

  # 通过环境变量适配任意部署路径
  location ~* ^/${DEPLOY_PATH}/ {
    alias /usr/share/nginx/html/;
    try_files $uri $uri/ /${DEPLOY_PATH}/index.html;
  }

  # 默认根路径部署规则
  location / {
    root /usr/share/nginx/html;
    try_files $uri $uri/ /index.html;
  }
}

2. 启动容器时指定路径
   启动容器时通过环境变量DEPLOY_PATH指定部署路径，无需修改镜像或重新构建项目：

docker run -d -p 8080:80 -e DEPLOY_PATH=example-url your-vue-image

访问http://localhost:8080/example-url/即可正常运行项目，更换路径只需修改DEPLOY_PATH变量后重启容器。

注意事项 #

• 若项目中存在第三方依赖硬编码绝对路径的情况，需排查并修改为相对路径或动态配置；
• 使用history模式时，后端（如Nginx）需要配置路由fallback，确保刷新页面不会出现404；
• Vue 3 + Vite项目配置类似，将vite.config.js中的base设置为'./'即可。

内容的提问来源于stack exchange，提问作者morteza mortezaie