准备工作

1. 服务端 CentOS7
2. 软件 git，docker-ce，nodejs-v14, make
3. 本地代码编辑工具 vscode 可选

安装Nodejs和 Vue 3.0

wget https://nodejs.org/dist/v14.17.3/node-v14.17.3-linux-x64.tar.xz
tar -xvpf node-v14.17.3-linux-x64.tar.xz
ln -sv /data/node-v14.17.3-linux-x64/bin/node /usr/bin/node -f
ln -sv /data/node-v14.17.3-linux-x64/bin/npm /usr/bin/npm -f
ln -sv /data/node-v14.17.3-linux-x64/bin/npx /usr/bin/npx -f
npm config set registry https://registry.npm.taobao.org
npm install @vue/cli -g
ln -sv /data/node-v14.17.3-linux-x64/bin/vue /usr/bin/vue -f

创建 Vue 项目和初始化开发环境

vue create vue3-project

1. vue-cli向导会提示选择vue版本，这里选择 vue3

Vue CLI v4.5.13
? Please pick a preset:
  Default ([Vue 2] babel, eslint)
❯ Default (Vue 3) ([Vue 3] babel, eslint)
  Manually select features

2. 其他默认即可，初始化完成后，会返回如下信息：

Vue CLI v4.5.13
✨  Creating project in /data/demo-project.
⚙️  Installing CLI plugins. This might take a while...

added 1276 packages in 35s
🚀  Invoking generators...
📦  Installing additional dependencies...

added 81 packages in 5s
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project demo-project ...

本地测试

进入项目源码目录，执行命令: cd /data/demo-project && npm run serve

 DONE  Compiled successfully in 2552ms                                                                                                              7:45:25 AM

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://10.9.76.113:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

3. 打开浏览器访问地址，可以看到显示 vue app页面

image

构建容器镜像

1. 进入项目目录demo-project，创建Dockerfile

# build stage
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

2. 进入项目目录demo-project，创建Makefile

all: run
build:
    docker build -t vuejs-app:latest .
run: build
    docker run -d -t -i --network host --name vuejs-app-prd vuejs-app

3. 进入项目目录demo-project
   1. 执行命令 make 构建镜像并运行，运行成功后，
   2. 浏览器访问服务器地址，验证功能
4. 将验证过的 Dockerfile Makefile 提交，推送到远端Git仓库

git add  Dockerfile Makefile
git commit -m "add Dockerfile Makefile" Dockerfile Makefile
git remote add origin git@github.com:xxxx/xxx.git
git push -u origin main

5. 后续src目录新增vue js 代码，安装新的node模块，重新进入测试，验证，代码提交的循环即可！

npm install vue-router@4 --save
vim src/main.js
vim src/router.js
vim src/components/Home.vue 
...
git commit -m "Home.vue: add New component"
git push 

参考

1. Nodejs官网下载地址：https://nodejs.org/en/download/
2. Vue3官方Dockerfile参考: https://vuejs.org/v2/cookbook/dockerize-vuejs-app.html