Skip to content

lincenying/mmf-blog-vite-vue3-ssr

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

mmf-blog vuejs 3.0 v3 中文说明

demo: http://www.mmxiaowu.com

The main technical stack: vue 3, vue-router 4, pinia, vitejs 5, unocss, eslint, pwa, ssr


Other versions

react(spa): https://github.com/lincenying/mmf-blog-react-v2

react(hooks spa): https://github.com/lincenying/mmf-blog-vite-react

vue2(spa): https://github.com/lincenying/mmf-blog-vue2

vue2(pwa ssr): https://github.com/lincenying/mmf-blog-vue2-pwa-ssr

vue3(spa): https://github.com/lincenying/mmf-blog-vite-vue3

vue3(pwa ssr): https://github.com/lincenying/mmf-blog-vite-vue3-ssr

nuxt3: https://github.com/lincenying/mmf-blog-vite-nuxt


First installation api server:

express-ts: https://github.com/lincenying/mmf-blog-api-ts

Project setup

pnpm install & npx simple-git-hooks

Compiles and hot-reloads for development

pnpm serve

Compiles and minifies for production

pnpm build

Preview for production

pnpm start

Lints and fixes files

pnpm lint

docker

1. 构建 api-server 容器

克隆 https://github.com/lincenying/mmf-blog-api-ts 仓库后, 按文档中的操作, 构建api server镜像, 并启动容器

2. 构建 web 容器

# 构建镜像
docker build -t images-mmf-blog-vite-vue3-ssr -f ./Dockerfile .
# 运行镜像
docker run -d -p 7777:7777 --add-host=host.docker.internal:host-gateway --name container-mmf-blog-vite-vue3-ssr images-mmf-blog-vite-vue3-ssr
# 进入镜像
docker exec -it container-mmf-blog-vite-vue3-ssr /bin/bash
# 停止容器
docker stop container-mmf-blog-vite-vue3-ssr
# 删除容器
docker rm container-mmf-blog-vite-vue3-ssr
# 删除镜像
docker rmi images-mmf-blog-vite-vue3-ssr

docker-compose

使用docker-compose, 将会从docker hub拉取api-server镜像, 并且启动容器 如果已经将api-server镜像传到docker hub, 修改docker-compose.yml中的api.image配置, 镜像改成自己的

api:
  container_name: api-server
  image: lincenying/api-server:1.0.1

修改docker-compose.yml中的mongo.volumes配置, 将宿主机数据库路径映射到容器中

volumes:
  - /Users/lincenying/web/mongodb/data:/data/db
# 生成镜像及启动容器
docker-compose build
docker-compose up -d
# 自动从docker hub拉取mongodb, api-server, web-server镜像, 并启动运行容器
docker-compose up -d -f docker-compose.prod.yml

Home Site http://localhost:7777

Login http://localhost:7777/backend/login

LICENSE

MIT