VUE2 - Docker部署 + traefik反代

环境 ： vue2 ，docker , traefik

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

　　　部署后，希望通过 http://localhost:7700/railfore访问，

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

1. 首先修改路由

const router = new Router({
  base: process.env.BASE_URL,
  scrollBehavior: () => ({ y: 0 }),
  mode: 'history',
  routes: constantRouterMap,
});

2. 修改配置文件

.env.working

NODE_ENV=working

3. 修改启动文件

  "scripts": {
    "serve": "vue-cli-service serve",
    "build:work": "vue-cli-service build --max_old_space_size=8192 --mode working", 
  },

4. 修改 vue.config.js 

const isWorking = process.env.NODE_ENV === 'working';

const vueConfig = {
  outputDir: isWorking ? "dist/railfore/" : 'dist/',
  publicPath: isWorking ? '/railfore/' : "/", //这个必须，引入静态资源需要从根路径引入，否则会找不到静态资源

  configureWebpack: {  
    plugins: [
      new CopyWebpackPlugin([
        {
          from: path.resolve(__dirname, "Dockerfile"),
          to: path.resolve(__dirname, "dist"),
        },
      ]),
    ],
  },    
}

5. 编辑 Dockerfile

# 使用arm64 nginx镜像
FROM nginx

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

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

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

# 暴露80端口
EXPOSE 80

6. 发布项目

yarn build:work

7. 打镜像

docker build -t railfore:arm64.20250924 .

8. 编辑 docker-compose

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

9. 编辑 nginx 的配置文件

default.conf

     server {
        listen       80;
        server_name  railfore;

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

        # 主应用路径 - 使用root指令
        location /railfore/ {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
            
            # 处理Vue Router的history模式
            try_files $uri $uri/ /railfore/index.html;
        }

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

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

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

 10. 启动

docker-compose up -d railfore

可以通过地址 http://ip:7700/railfore  访问服务

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.railfore]
    entryPoints = ["web"]  
    rule = "PathPrefix(`/railfore`)"
    service = "railfore-svc"
    priority = 10
  [http.services]
    [http.services.railfore-svc]
      [http.services.railfore-svc.loadBalancer]
        [[http.services.railfore-svc.loadBalancer.servers]]
          url = "http://10.5.84.10:7700/"

 启动 traefik 后 

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

end.