Vercel 部署 NuxtJS 应用

部署NuxtJS应用

NuxtJS官方介绍了几个服务端部署的方式。

其中 GitHub 是将应用打包成静态资源，然后使用 GitHub Pages 发布。

GitHub Pages 只能托管静态页面。

像使用NuxtJS开发的SSR应用，可以选择使用 Vercel。

案例：先使用 NuxtJS + RealWorld 搭建一个简单案例。

使用Vercel

• Vercel 官网：https://vercel.com/
• NuxtJS 官方 Vercel 教程：https://nuxtjs.org/faq/now-deployment

注册Vercel

首先需要去Vercel官网注册账号，或用GitHub账号授权登录

注意，主邮箱是QQ邮箱的，认证会不通过：

可以添加其他邮箱，并设置为主邮箱，等注册后，再把主邮箱切换回来。

登录后可以直接 Import Git仓库地址，也可以直接发布本地项目（当前文章案例）。

部署本地应用

1. 全局安装 Vercel

npm i -g vercel

2. 在项目根目录新建一个now.json文件。

为了通过Vercel进行部署，Nuxt.js团队和贡献者使用了@nuxtjs/now-builder 官方软件包（“ Now”是Vercel的前名）。

{
  "version": 2,
  "builds": [
    {
      "src": "nuxt.config.js", // nuxt配置文件
      "use": "@nuxtjs/now-builder", // 使用的官方包
      "config": {}
    }
  ]
}

3. 修改 nuxt 服务端口号

// nuxt.config.js
module.exports = {
  // ...
  server: {
    // 默认localhost 只能本地访问
    // 若想要对外访问，要配置为 0.0.0.0
    host: '0.0.0.0',
    // nuxtjs 默认 3000
    // vercel 默认80
    port: 80
  }
}

4. 忽略 .nuxt （可选）

NuxtJs官方建议将 .nuxt 目录添加到 .npmignore 或 .gitignore列表中。

5. 执行命令vercel发布

首次执行会要求输入邮箱验证登录

完成后，再次执行vercel，根据提示步骤进行操作：

# 是否部署当前项目 -> y
? Set up and deploy “D:\work\learn\realworld-nuxtjs”? [Y/n] 
# 选择发布到的位置 -> 直接回车
# 如果是GitHub账户登录，默认就是账户名，显示在提示下面
# 可以在官网登录后访问这个地址查看：https://vercel.com/dashboard
Which scope do you want to deploy to?
·[githubname]
# 是否链接到一个存在的项目 -> n
? Link to existing project? [y/N]
# 为项目命名，使用默认即可 -> 直接回车
? What’s your project’s name? (realworld-nuxtjs)
# 选择代码的位置，当前代码位置就是根目录 -> 直接回车
? In which directory is your code located? ./

接着就会进行发布：

• Inspect 可以跳转到 vercel 网站查看项目部署进度
• Production 就是部署完访问的地址
  • 注意，vercel部署的站点的访问地址是https开头的，所以项目中请求的接口应该也是https开头，否则会请求失败
• 其他提示：

Due to `builds` existing in your configuration file, the Build and Development 
Settings defined in your Project Settings will not apply. Learn More: https://vercel.link/unused-build-settings

该提示表示：由于配置文件now.json中存在builds，所以不使用默认的构建命令。

如果是从网页中新建项目，执行的就是默认的构建命令。

可以访问提示中的 settings 地址查看构建命令配置：https://vercel.com/用户名/项目名/settings

重新发布

Vercel首次部署完，会在项目根目录创建.vercel目录，内部包含 project.json 它存储了为项目生成的一个组织id和项目id

修改项目内容后，不需要使用 nuxt 打包。

直接执行vercel --prod命令，即可发布。

Which scope do you want to deploy to?

执行 vercel 命令部署时，有一个步骤询问发布的位置。

使用 Github 账号注册登录的，默认会以登录名为名创建一个 Team。

这里选择的就是这个 Team，并且只能选择提供的选项。

可以登录 官网网站 手动创建 Team：

成功执行 vercel 命令就可以选择它了：