项目初始化
vue create vue-app
cd vue-app
npm run serve
至此，我们就已经完成了项目的初始化。Vue 项目部署，有多种方式实现，具体如下：
Docker + nginx
● 项目跟目录下创建 Dockerfile 文件
# 使用官方的 Node.js 镜像作为基础镜像
FROM node:lts-alpine as build-stage
# 设置工作目录
WORKDIR /app
# 复制 package.json 和 package-lock.json 到工作目录
COPY package*.json ./
# 安装依赖
RUN npm install
# 复制项目文件到工作目录
COPY . .
# 构建 Vue 项目
RUN npm run build
# 使用官方的 Nginx 镜像作为基础镜像
FROM nginx:stable-alpine as production-stage
# 将构建好的项目文件复制到 Nginx 镜像的 HTML 目录
COPY --from=build-stage /app/dist /usr/share/nginx/html
# 暴露 80 端口
EXPOSE 80
# 启动 Nginx
CMD ["nginx", "-g", "daemon off;"]
● 项目跟目录下创建 .dockerignore 文件，这将防止将不必要的文件复制到 Docker 镜像中。
node_modules
npm-debug.log
● 构建 Docker镜像
docker build -t vue-app -f ./Dockerfile .
● 运行 Docker 容器
docker run -d -p 9000:80 --name vue-app-container vue-app
Docker + express
express 服务初始化
● 初始化 express 服务项目
终端执行如下命令：
mkdir server
cd server
npm init -y
npm i express
touch index.js
最终目录结构如下所示：
● express 托管静态资源。
const express = require('express');
const path = require('path');
const app = express();
/**
* 静态资源目录
*/
app.use(express.static(path.join(__dirname, 'dist')));
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});
app.listen(8080, () => {
console.log(`app is started at port: ${8080}`);
});
● 注意，上面我们托管文件的跟目录为 dist，和 index.js 是同一级的，所以我们要将打包后的资源放在 server/dist 目录，需要在 vue.config.js 指定输出目录：
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
outputDir: `server/dist`,
})
● 接下来启动 express 服务
至此，我们已经完成了本地使用 express 托管 vue 项目。接下来我们要完成的工作则是将上述通过 Docker 进行构建。
构建 docker 镜像
● 项目跟目录下创建 Dockerfile 文件
# 使用官方的 Node.js 镜像作为基础镜像
FROM node:lts-alpine
# 设置工作目录
WORKDIR /app
# 复制项目文件到工作目录
COPY . .
# 安装 vue 项目所需依赖
RUN npm install
# 构建 vue 项目
RUN npm run build
# 进入到 server 目录
WORKDIR /app/server
# 安装 server 依赖
RUN npm install
# 暴露端口
EXPOSE 8080
# 启动 Express 服务器
CMD ["node", "index.js"]
● 项目跟目录下创建 .dockerImages 文件
node_modules
npm-debug.log
● 开始构建镜像（为了验证只有纯代码的场景下构建镜像，最好删除无关代码，比如 node_modules 以及 vue 打包后的文件。）
● 运行镜像
docker run -d -p 9000:8080 --name vue-app-express-container vue-app-express
至此，我们便完成了通过 Docker + express 部署 vue 的方案。
总结
接下来，我们对比下 nginx 和 express 部署 vue 各自的优点：
使用 Nginx 部署 Vue 项目的优点：
- 性能：Nginx 作为高性能的 Web 服务器和反向代理服务器，可以更好地处理静态文件和大量并发连接，提供更高的性能和稳定性。
- 负载均衡和反向代理：Nginx 可以轻松地配置负载均衡和反向代理，这有助于在需要时扩展你的应用程序。
- 缓存和压缩：Nginx 可以对静态资源进行缓存和压缩，从而进一步提高性能和减少带宽使用。
- SSL/TLS 支持：Nginx 提供了对 SSL/TLS 的原生支持，可以轻松地为你的应用程序启用 HTTPS。
- 高度可配置：Nginx 具有高度可配置的架构，可以根据需要进行灵活的调整和优化。
使用 Express 部署 Vue 项目的优点：
- 简单性：使用 Express 部署 Vue 项目相对简单，只需在项目中添加一个简单的 Express 服务器即可。
- 同构应用程序：如果你的 Vue 项目使用了服务器端渲染 (SSR)，则可以使用 Express 服务器作为服务器端渲染引擎，实现同构应用程序。
- 自定义逻辑：在 Express 服务器中，你可以轻松地添加自定义逻辑，例如 API 路由、身份验证和授权等。
- Node.js 生态系统：Express 是 Node.js 生态系统的一部分，可以利用大量的 Node.js 包和库，轻松地扩展应用程序的功能。
- 直接与前端代码集成：使用 Express 可以将前端代码与后端代码放在同一个项目中，方便开发和维护。
