一、下载安装docker（过）

二、找一个本地项目（最好helloword，做快速验证）

我这里使用的是vite创建的项目

三、根目录下新建dockerfile和nginx配置文件

1、dockerfile内容

# 安装Node.js
FROM node:latest

# 创建工作目录
WORKDIR /app

# 将node_modules添加到工作目录
COPY package.json .
RUN npm install
RUN npm install -g npm@8.1.3
RUN npm install -g @vue/cli@4.5.15

# 将所有文件复制到工作目录
COPY . .

# 编译前端项目
RUN yarn build

# 产生静态文件
FROM nginx:stable-alpine
COPY --from=0 /app/dist /usr/share/nginx/html/
# COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY nginx.conf /etc/nginx/conf.d/

2、nginx.conf内容

server {
  listen 80;
  server_name localhost;

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

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

3、如图

四、vscode新建终端输入命令，创建镜像

docker build -f .\Dockerfile.dockerfile . -t hello:v1

五、vscode新建终端输入命令，跑容器

docker run -d -p 8081:80 hello:v1

六、打开浏览器输入localhost:8081，即可看到页面

七、附录

1、vite.config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    port: 8080, // 服务端口号
    open: true, // 服务启动时是否自动打开浏览器
    cors: true, // 允许跨域
    host: "0.0.0.0",
    proxy: {
    },
  },
});

2、package.json

{
  "name": "softphone",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "axios": "^1.2.2",
    "element-plus": "^2.2.28",
    "vue": "^3.2.45"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "vite": "^4.0.0"
  }
}