VUE2 - Docker部署 + traefik反代

环境 ： vue3，vite ，docker , traefik

条件： 当前由vue3开发，调试环境地址为  http://localhost:6188/

　　　部署后，希望通过 http://localhost:7701/master 访问，

　　　反代后，希望通过 http://localhost:3000/master 访问

1. 首先修改路由

export const router = createRouter({ 
  history: createWebHistory('/master/'),
  routes: basicRoutes,
});

3. 修改启动文件

  "scripts": {
    "dev": "vite",
     "build:special22": "cross-env BUILD_MODE=special vite build --mode special22", 
  },

4. 修改 vite.config.js 

const isSpecial = process.env.BUILD_MODE === 'special';

export default defineConfig({
  plugins: [
    vue(),
    svgLoader(),
    // basicSsl()
    vueJsx(),
    {
      name: 'copy-dockerfile',
      writeBundle() {
        // 构建完成后复制文件
        const targetDir = 'dist/';  

        const dockerfilePath = resolve(__dirname, 'Dockerfile');
        const targetPath = resolve(__dirname, targetDir, 'Dockerfile');

        if (fs.existsSync(dockerfilePath)) {
          fs.copyFileSync(dockerfilePath, targetPath);
        }
      },
    },
  ],

  base: isSpecial ? '/master/' : '/',

  build: {
    outDir: isSpecial ? 'dist/master/' : 'dist/',
    emptyOutDir: true,
    assetsDir: 'assets',
    sourcemap: false,
    minify: 'terser',
  },
}

5. 编辑 Dockerfile

# 使用arm64 nginx镜像
FROM nginx

# 定义作者（推荐使用LABEL替代MAINTAINER）
LABEL maintainer="lihongyuan"

# 设置工作目录
WORKDIR /usr/share/nginx/html

# 复制静态文件到nginx目录
COPY . .

# 暴露80端口
EXPOSE 80

6. 发布项目

pnpm run build:special22

7. 打镜像

docker build -t railmaster:arm64.20250924 .

8. 编辑 docker-compose

version: '3.8'
services:
  railmaster:
    image: railmaster:arm64.20250924
    container_name: railmaster
    restart: always
    ports:
      - "7701:80"
    volumes:
      - /data/dockerMappingFiles/data_railmaster/default.conf:/etc/nginx/conf.d/default.conf

9. 编辑 nginx 的配置文件

default.conf

     server {
        listen       80;
        server_name  master;

        # 禁用自动重定向
        absolute_redirect off;
        server_name_in_redirect off;
        port_in_redirect off;

        # 主应用路径 - 使用root指令
        location /master/ {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
             
            try_files $uri $uri/ /master/index.html;
        }

        # 处理不带斜杠的访问
        location = /master {
            return 301 /master/;
        }

        # 根路径重定向到railmaster
        location = / {
            return 301 /master/;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
     } 

 10. 启动

docker-compose up -d railmaster

可以通过地址 http://ip:7701/master 访问服务

11. 配置traefik

traefik.toml

[ping]
  entryPoint = "web"

[entryPoints]
  [entryPoints.web]
    address = ":3000"
  [entryPoints.websecure]
    address = ":8444"

[log]
  level = "DEBUG"
  filePath = "/data/winstall/traefik/traefik.log"

[accessLog]
  filePath = "/data/winstall/traefik/access.log"

[api]
  insecure = true
  dashboard = true

[providers.file]
  filename = "/data/winstall/traefik/dynamic_conf.toml"
  watch = true

dynamic_conf.toml

  [http.routers.master]
    entryPoints = ["web"]  
    rule = "PathPrefix(`/master`)"
    service = "master"
    priority = 10
  [http.services]
    [http.services.master]
      [http.services.master.loadBalancer]
        [[http.services.master.loadBalancer.servers]]
          url = "http://10.5.84.10:7701/"

 启动 traefik 后 

 可以访问 http://ip:3000/master

end.