项目构建

首先我们看下 package.json 的脚本配置，本地开发的时候运行 npm run dev，

"scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "build:dev": "vite build --mode development",
    "build:pro": "vite build --mode production",
    "preview": "vite preview",
    "prettier": "prettier --write ."
  },

npm run build 对项目进行打包

在build时，执行了vue-tsc --noEmit && vite build，其中

• vue-tsc：Vue 官方提供的命令，用于执行 TS 的类型检查。它在执行时会根据项目中的 tsconfig.json 文件配置进行类型检查
• --noEmit：TS 编译器的选项，使用 --noEmit 选项后，编译器仅执行类型检查，而不会生成任何实际的编译输出

如果使用 build 时候出现 noEmit 的错误，确认你自己的代码没问题，这两个命令也可以不要，直接 vite build 就行

dev 模式，构建项目时使用 env.development 配置
pro 模式，构建项目时使用 env.production 配置

构建完成后，可以使用 npm run preview 对项目进行预览

本地运行

先运行命令将项目进行打包

npm run build:pro

安装服务器

npm install -g http-server

运行打包后的项目，在项目根目录下，http-server 是一个服务器用来运行 dist 项目

http-server dist -p 8080

Docker 部署

本地通常在 windows 下进行开发，部署在 linux 上，通常需要打包成 docker 镜像文件进行部署，推荐两种方式

1、本地打包，使用 docker desktop 打包成镜像后，然后再推送到 docker hub，这样其他人就可以在 docker hub 下载镜像进行安装了

2、将代码上传到 github，然后从 linux 服务器上拉取代码，直接在服务器上构建镜像，然后进行部署，再把构建好的镜像推送到 docker hub

编写 Dockerfile

我们用 nginx 作为运行项目的服务器，在项目根目录下创建一个名为 Dockerfile 的文件，并添加以下内容

# 使用 Node 作为基础镜像
FROM node:lts-alpine AS builder

# 设置工作目录
WORKDIR /app

# 复制 package.json 和 package-lock.json
COPY package.json .
COPY package-lock.json .

# 安装依赖
RUN npm install

# 复制整个项目到工作目录
COPY . .

# 构建项目
RUN npm run build

FROM nginx
COPY --from=builder app/dist /usr/share/nginx/html/
COPY --from=builder app/nginx.conf /etc/nginx/conf.d/default.conf

# 暴露端口
# EXPOSE 5566

添加 nginx.conf 配置

server {
    listen 80;
    server_name localhost;

    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

以上内容只是一个示例，具体还需要根据项目的需要进行构建，可以网上参开其他方式，细节上会有些出入

构建 Docker 镜像

先创建 .dockerignore ，这样在构建镜像时会忽略项目中不必要的文件，减小打包的体积

**/node_modules
*/node_modules
node_modules
Dockerfile
.*
*/.*
!.env

如果是用的 vscode，且安装了 docker 插件，直接右键 dockerfile 构建镜像就行了，或者在项目根目录下打开终端，运行以下命令构建 Docker 镜像：

docker build -t your-image-name .

注意，推送镜像的docker hub 仓库的时候时候需要，需要知道用户吗，所以一般镜像的格式是 用户名/镜像名:版本号