今天，我开始学习一个新项目及其前端部分。我应该说我以前从未与Vue合作过，我需要做一个操场来尝试一下并从练习中学习。
我的第一个想法是设置带有一些基于JavaScript工具的特定版本的Docker容器，并稍微播放代码。后来我可以扩展我对一个真实项目的经验。
让我们开始。
步骤1.创建一个项目
mkdir docker-vite和cd docker-vite
步骤2.创建项目的结构
├── README.md
├── Vite.Dockerfile
├── docker-compose.yml
└── shell
└── build.sh
shell文件夹将包含一些外壳助手，以使某些例行过程自动化。像构建Docker映像或将图像推到hub.docker.com
步骤3.准备Docker图像
在Vite.Dockerfile中，我有以下
我在这里找到的原始图像jitesoft/node-yarn
# VITE | NODE 20 + YARN 3.5+
FROM --platform=$BUILDPLATFORM jitesoft/node-yarn:20
ARG TARGETARCH
ARG BUILDPLATFORM
RUN echo "$BUILDPLATFORM" > /BUILDPLATFORM
RUN echo "$TARGETARCH" > /TARGETARCH
RUN yarn set version berry
RUN mkdir -p /home/app
WORKDIR /home/app
EXPOSE 4000
CMD ["/bin/sh"]
步骤4.构建图像
现在我正在构建图像
docker build \
-t iamteacher/vite:arm64 \
-f Vite.Dockerfile \
--build-arg BUILDPLATFORM="linux/arm64" \
--build-arg TARGETARCH="arm64" \
.
控制台输出为：
the-teacher@macbook docker-vite:: $ docker build \
> -t iamteacher/vite:arm64 \
> -f Vite.Dockerfile \
> --build-arg BUILDPLATFORM="linux/arm64" \
> --build-arg TARGETARCH="arm64" \
> .
[+] Building 0.1s (10/10) FINISHED
=> [internal] load build definition from Vite.Dockerfile 0.0s
=> => transferring dockerfile: 42B 0.0s
=> [internal] load .dockerignore 0.0s
=> => transferring context: 2B 0.0s
=> [internal] load metadata for docker.io/jitesoft/node-yarn:20 0.0s
=> [1/6] FROM docker.io/jitesoft/node-yarn:20 0.0s
=> CACHED [2/6] RUN echo "linux/arm64" > /BUILDPLATFORM 0.0s
=> CACHED [3/6] RUN echo "arm64" > /TARGETARCH 0.0s
=> CACHED [4/6] RUN yarn set version berry 0.0s
=> CACHED [5/6] RUN mkdir -p /home/app 0.0s
=> CACHED [6/6] WORKDIR /home/app 0.0s
=> exporting to image 0.0s
=> => exporting layers 0.0s
=> => writing image sha256:d99d23d1ac58af0fad10c7c0868e7bb7f4d1636e7627f999a9e7b2a1f071e328 0.0s
=> => naming to docker.io/iamteacher/vite:arm64
步骤5.简单的图像构建自动化
使重建过程更简单，我创建了一个bash文件，我将在以后使用
shell/build.sh
# Run from the root of the project
#
# source shell/build.sh
docker build \
-t iamteacher/vite:arm64 \
-f Vite.Dockerfile \
--build-arg BUILDPLATFORM="linux/arm64" \
--build-arg TARGETARCH="arm64" \
.
docker build \
-t iamteacher/vite:amd64 \
-f Vite.Dockerfile \
--build-arg BUILDPLATFORM="linux/amd64" \
--build-arg TARGETARCH="amd64" \
.
步骤6.检查图像和软件
让我们跳入容器，检查它是否正常工作。
docker run -ti iamteacher/vite:arm64
步骤7.在容器中
/home/app # pwd
/home/app
/home/app # node -v
v20.0.0
/home/app # yarn -v
3.5.0
/home/app # npm -v
9.6.4
/home/app # exit
步骤8
现在是时候写docker-compose.yml。
目前，我在项目中没有用node来运行。我只想启动一个容器，与当前文件夹链接并启动一个node项目。
# docker compose -f docker-compose.yml up
version: '3.9'
name: vite_docker
services:
# Port: 4000
vite:
tty: true
image: iamteacher/vite:arm64
ports:
- 4000:4000
volumes:
- .:/home/app
现在让我们使用docker compose
运行容器
docker-vite:: $ docker compose -f docker-compose.yml up
[+] Running 1/0
⠿ Container vite_docker-vite-1 Created 0.0s
Attaching to vite_docker-vite-1
步骤9.启动纱线/VUE项目
$ docker exec -ti vite_docker-vite-1 sh
现在我们在容器中。让我们检查一下容器链接到我们的HOST filesystem。
是的，在容器中，我们看到了我们项目的所有文件。
命令：ls
/home/app # ls
README.md
Vite.Dockerfile
docker-compose.yml
shell
命令：yarn create vite
/home/app # yarn create vite
➤ YN0000: ┌ Resolution step
➤ YN0000: └ Completed in 5s 66ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ create-vite@npm:4.2.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0000: └ Completed in 0s 407ms
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0000: └ Completed
➤ YN0000: Done with warnings in 5s 520ms
- 项目名称：
vite-project - 框架：
Vue - 变体：
TypeScript
✔ Project name: … vite-project
? Select a framework: › - Use arrow-keys. Return to submit.
Vanilla
❯ Vue
React
Preact
Lit
Svelte
Others
? Select a variant: › - Use arrow-keys. Return to submit.
JavaScript
❯ TypeScript
Customize with create-vue ↗
Nuxt ↗
在此步骤中，我有以下错误：
LibzipError [Libzip Error]: Can't open file: No file descriptors available
at ZipFS.makeLibzipError (/tmp/xfs-eed97368/dlx-1414/.pnp.cjs:1675:25)
at new ZipFS (/tmp/xfs-eed97368/dlx-1414/.pnp.cjs:1650:20)
at ZipOpenFS.getZipSync (/tmp/xfs-eed97368/dlx-1414/.pnp.cjs:3840:18)
at ZipOpenFS.makeCallSync (/tmp/xfs-eed97368/dlx-1414/.pnp.cjs:3720:17)
at ZipOpenFS.readdirSync (/tmp/xfs-eed97368/dlx-1414/.pnp.cjs:3613:17)
at VirtualFS.readdirSync (/tmp/xfs-eed97368/dlx-1414/.pnp.cjs:2861:24)
at PosixFS.readdirSync (/tmp/xfs-eed97368/dlx-1414/.pnp.cjs:2861:24)
at NodePathFS.readdirSync (/tmp/xfs-eed97368/dlx-1414/.pnp.cjs:2861:24)
at Jr (file:///root/.yarn/berry/cache/create-vite-npm-4.2.0-11226b5ec8-8.zip/node_modules/create-vite/dist/index.mjs:49:180)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
code: 'ZIP_ER_OPEN'
}
步骤10.第二次尝试
出现错误后，我要重新运行创建命令。这次一切都成功了。
/home/app # yarn create vite
✔ Project name: … vite-project
✔ Select a framework: › Vue
✔ Select a variant: › TypeScript
Scaffolding project in /home/app/vite-project...
Done. Now run:
cd vite-project
yarn
yarn dev
/home/app # ls -al vite-project/
total 28
drwxr-xr-x 12 root root 384 Apr 20 10:30 .
drwxr-xr-x 9 root root 288 Apr 20 10:27 ..
-rw-r--r-- 1 root root 253 Apr 20 10:30 .gitignore
drwxr-xr-x 3 root root 96 Apr 20 10:30 .vscode
-rw-r--r-- 1 root root 1527 Apr 20 10:30 README.md
-rw-r--r-- 1 root root 362 Apr 20 10:30 index.html
-rw-r--r-- 1 root root 381 Apr 20 10:30 package.json
drwxr-xr-x 3 root root 96 Apr 20 10:30 public
drwxr-xr-x 8 root root 256 Apr 20 10:30 src
-rw-r--r-- 1 root root 488 Apr 20 10:30 tsconfig.json
-rw-r--r-- 1 root root 184 Apr 20 10:30 tsconfig.node.json
-rw-r--r-- 1 root root 157 Apr 20 10:30 vite.config.ts
步骤11. yarn .lock的问题
当我做
时
cd vite-project
yarn
我看到以下内容：
Usage Error: The nearest package directory (/home/app/vite-project) doesn't seem to be part of the project declared in /.
- If / isn't intended to be a project, remove any yarn.lock and/or package.json file there.
- If / is intended to be a project, it might be that you forgot to list home/app/vite-project in its workspace configuration.
- Finally, if / is fine and you intend home/app/vite-project to be treated as a completely separate project (not even a workspace), create an empty yarn.lock file in it.
我使用最后一个选项 - 创建一个空的yarn.lock
命令：touch yarn.lock
touch yarn.lock
yarn install
现在我看到：
/home/app/vite-project # yarn install
➤ YN0000: ┌ Resolution step
➤ YN0061: │ sourcemap-codec@npm:1.4.8 is deprecated: Please use @jridgewell/sourcemap-codec instead
➤ YN0032: │ fsevents@npm:2.3.2: Implicit dependencies on node-gyp are discouraged
➤ YN0061: │ @npmcli/move-file@npm:2.0.1 is deprecated: This functionality has been moved to @npmcli/fs
➤ YN0002: │ @volar/vue-typescript@npm:1.3.19 doesn't provide typescript (p5c1ac), requested by @volar/typescript
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
➤ YN0000: └ Completed in 3s 997ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ which@npm:2.0.2 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ wide-align@npm:1.1.5 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ wrappy@npm:1.0.2 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yallist@npm:4.0.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ typescript@npm:4.9.5 can't be found in the cache and will be fetched from the remote registry
➤ YN0000: └ Completed in 29s 909ms
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0007: │ esbuild@npm:0.17.17 must be built because it never has been before or the last one failed
➤ YN0000: └ Completed in 1s 70ms
➤ YN0000: Done with warnings in 35s 8ms
步骤12.运行Vite
现在我正在运行vite：
命令：yarn dev
# yarn dev
VITE v4.3.0 ready in 604 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help
我决定我需要更改端口并公开我的应用程序。让我们尝试以下内容：
命令：yarn dev --host --port 4000
# yarn dev --host --port 4000
VITE v4.3.0 ready in 584 ms
➜ Local: http://localhost:4000/
➜ Network: http://172.22.0.2:4000/
太好了！还活着！
我们可以停止该项目。 CMD+C
步骤13.更新docker-compose.yml
现在，当我们有一个Vite项目并起作用时，我想更新我的docker-compose.yml，以使事情变得更加彼此调整。
我添加了一条新行
command: yarn dev --host --port 4000
也更改volumes节
volumes:
- ./vite-project:/home/app
现在docker-compose.yml看起来如此：
# docker compose -f docker-compose.yml up
version: '3.9'
name: vite_docker
services:
# Port: 4000
vite:
tty: true
image: iamteacher/vite:arm64
command: yarn dev --host --port 4000
ports:
- 4000:4000
volumes:
- ./vite-project:/home/app
步骤14.运行并保存结果
我将再一次运行该项目以检查一切是否顺利。
$ docker compose -f docker-compose.yml up
[+] Running 1/1
⠿ Container vite_docker-vite-1
vite_docker-vite-1 | VITE v4.3.0 ready in 619 ms
vite_docker-vite-1 |
vite_docker-vite-1 | ➜ Local: http://localhost:4000/
vite_docker-vite-1 | ➜ Network: http://172.22.0.2:4000/
vite_docker-vite-1 | ➜ press h to show help
该项目可在http://localhost:4000上找到，无需任何其他操作。
让我们在.gitignore中添加一些行
node_modules
.yarn
并用git保存并推到github -docker-vite
更新
如果要将您的Vite项目集成到存在的应用程序中，则可能需要拥有一个manifest.json文件。
要拥有它，您应该在编译production构建时添加--manifest标志，或在vite.config.ts中添加相同的标志
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const viteConfig = defineConfig({
build: {
manifest: true
},
plugins: [vue()],
})
export default viteConfig