面试题：如何部署 Vue 项目？

部署 Vue 项目通常包括以下步骤：

1. 构建项目

在部署之前，需要将 Vue 项目打包为生产环境可用的静态文件。

使用 Vue CLI 构建：

npm run build

或

yarn build

构建完成后，会在项目根目录下生成一个 dist 文件夹，里面包含了所有静态文件（HTML、CSS、JS 等）。

2. 选择部署方式

根据项目需求选择合适的部署方式。常见的部署方式包括：

2.1 静态文件托管

将 dist 文件夹中的静态文件托管到静态文件服务器或 CDN 上。

Nginx：

将 dist 文件夹上传到服务器。

配置 Nginx：

server {
  listen 80;
  server_name yourdomain.com;

  location / {
    root /path/to/your/dist;
    index index.html;
    try_files $uri $uri/ /index.html; # 支持 history 模式
  }
}

重启 Nginx：sudo systemctl restart nginx

Apache：

将 dist 文件夹上传到服务器。

配置 Apache：

<VirtualHost *:80>
  DocumentRoot /path/to/your/dist
  ServerName yourdomain.com

  <Directory /path/to/your/dist>
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
  </Directory>
</VirtualHost>

重启 Apache：sudo systemctl restart apache2

2.2 云服务托管

将 dist 文件夹部署到云服务提供商的静态托管服务上。

Netlify：
1. 将项目推送到 GitHub/GitLab/Bitbucket。
2. 在 Netlify 中导入项目，设置构建命令为 npm run build，发布目录为 dist。
Vercel：
1. 将项目推送到 GitHub/GitLab/Bitbucket。
2. 在 Vercel 中导入项目，设置构建命令为 npm run build，输出目录为 dist。
GitHub Pages：
1. 在 vue.config.js 中配置 publicPath：
```
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/your-repo-name/' : '/',
};
```
2. 构建项目：npm run build
3. 将 dist 文件夹推送到 GitHub Pages：git subtree push --prefix dist origin gh-pages

2.3 Docker 部署

将 Vue 项目打包为 Docker 镜像并部署到服务器或容器平台。

Dockerfile：

# 使用 Node.js 作为构建环境
FROM node:14 as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 使用 Nginx 作为生产环境
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

构建和运行 Docker 镜像：

docker build -t your-image-name .
docker run -d -p 80:80 your-image-name

3. 配置环境变量

在部署时，可能需要配置生产环境的环境变量。

使用 `.env` 文件：

在项目根目录下创建 .env.production 文件：VUE_APP_API_URL=https://api.example.com
在代码中访问环境变量：const apiUrl = process.env.VUE_APP_API_URL;

4. 优化性能

在部署后，可以通过以下方式优化性能：

4.1 启用 Gzip 压缩

在 Nginx 中启用 Gzip 压缩：

gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

4.2 配置缓存

在 Nginx 中配置静态资源缓存：

location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
  expires 1y;
  add_header Cache-Control "public";
}

4.3 使用 CDN

将静态资源托管到 CDN 上，加速资源加载。

5. 测试部署

在部署完成后，访问网站并测试以下内容：

页面加载是否正常。
路由是否正常工作（尤其是 history 模式）。
API 请求是否正常。
性能是否符合预期。

总结

部署 Vue 项目的步骤包括：

构建项目：使用 npm run build 生成 dist 文件夹。
选择部署方式：
- 静态文件托管（Nginx、Apache）。
- 云服务托管（Netlify、Vercel、GitHub Pages）。
- Docker 部署。
配置环境变量：使用 .env.production 文件。
优化性能：启用 Gzip 压缩、配置缓存、使用 CDN。
测试部署：确保网站功能正常。