Rancher是一個開源的容器管理平臺，可以幫助我們輕松地管理Docker容器。而Vue.js則是一個非常流行的JavaScript框架，常用于構建單頁面應用程序。本文將介紹如何使用Rancher將Vue.js應用程序部署到Docker容器中。

首先，我們需要創(chuàng)建一個用于部署Vue.js應用程序的Docker鏡像。我們可以通過以下的Dockerfile來創(chuàng)建該鏡像：

FROM node:latest
MAINTAINER Your NameWORKDIR /app
COPY . .
RUN npm install && npm run build
EXPOSE 80
CMD ["npm", "start"]

該Dockerfile使用最新的Node.js鏡像，并在/app目錄下構建Vue.js應用程序。在構建之前，我們需要將應用程序代碼復制到/app目錄中。構建成功后，我們將使用npm start命令啟動應用程序，開放應用程序的80端口。

接下來，我們需要使用Rancher部署該Docker鏡像。首先，我們需要在Rancher中創(chuàng)建一個新的堆棧。堆棧是一個邏輯組件，可以用于組織和管理不同的應用程序。我們可以使用以下的docker-compose.yml文件來定義該堆棧：

version: '2'
services:
vue:
image: your-registry.com/vue
ports:
- 80:80
labels:
io.rancher.container.pull_image: always

該文件定義了一個名為Vue的Docker服務，使用我們先前創(chuàng)建的Docker鏡像。我們在該服務中開放80端口，并使用Rancher的always標簽來確保該服務的鏡像始終被拉取。

最后，我們只需要單擊“部署”按鈕，Rancher將會自動根據(jù)我們的定義創(chuàng)建該服務。在Rancher中，我們可以方便地查看在不同主機上運行的服務，管理它們的健康狀態(tài)，查看它們的日志以及更多操作。