5.7 项目打包并部署

经过一步步的设计与开发，我们已经完成了备忘录的所有功能。然而现在项目只能在本地运行，如果要所有人都能访问，还差最后一步，就是打包并部署到服务器。

项目打包使用以下命令，打包后的文件会输出到 dist 目录。

$ yarn run build

假设现在有一台 Linux 服务器，我们要将打包后的 dist 文件夹部署。

第一步先把这个文件夹传到服务器上，并且改名为 vue3-memo。传文件到服务器可以用 FTP 工具，也可以用命令行。假设文件夹上传的位置是 /home/libai，那么服务器上的项目目录就是 /home/libai/vue3-memo。

服务器部署前端项目最常用的方式是使用 Nginx。Nginx 是当前最流行的 Web 服务器，它可以直接解析前端文件，并指定一个域名访问。使用如下命令查看当前服务器是否安装 Nginx：

$ nginx -t

上面命令如果正常执行，会打印出 Nginx 的配置文件路径，表示 Nginx 运行中；如果提示命令未找到说明 Nginx 没有运行，请先自行安装，这里不赘述。

假设我们的域名是 memo.test.com，那么在 Nginx 的配置文件中添加以下配置：

server {
  listen  80;
  server_name  memo.test.com;
  index  index.html;
  root  /home/libai/vue3-memo;
  location / {
    try_files $uri $uri/ /index.html;
  }
}

上面的几个参数含义为：

listen：监听端口。
server_name：绑定的域名。
index：首页默认文件。
root：项目目录位置。

最后一项 location 的配置非常关键，了解它的作用，我们还要说回路由。

Vue Router 有两种路由模式：hash 模式和 history 模式。hash 模式会在 URL 中加一个 # 符号，清晰的区分了文件地址和前端路由；而 history 模式就是普通的 URL 地址。

在使用 Nginx 部署项目时，history 模式会遇到解析问题。当页面刷新时，nginx 会将前端路由认为是文件目录，因此会出现 404 的错误。解决这个问题，就要 Nginx 配置解析路径，也就是最后一条配置：

location / {
  try_files $uri $uri/ /index.html;
}

添加配置之后保存，还是使用 “nginx -t” 命令查看配置是否有误，没有问题则执行以下命令让配置文件生效：

$ nginx -s reload

5.7 项目打包并部署 ​

5.7 项目打包并部署