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仓库地址，也可以直接发布本地项目（当前文章案例）。
部署本地应用
- 全局安装 Vercel
npm i -g vercel
- 在项目根目录新建一个
now.json文件。
为了通过Vercel进行部署，Nuxt.js团队和贡献者使用了@nuxtjs/now-builder 官方软件包（“ Now”是Vercel的前名）。
{
"version": 2,
"builds": [
{
"src": "nuxt.config.js", // nuxt配置文件
"use": "@nuxtjs/now-builder", // 使用的官方包
"config": {
}
}
]
}
- 修改 nuxt 服务端口号
// nuxt.config.js
module.exports = {
// ...
server: {
// 默认localhost 只能本地访问
// 若想要对外访问，要配置为 0.0.0.0
host: '0.0.0.0',
// nuxtjs 默认 3000
// vercel 默认80
port: 80
}
}
- 忽略
.nuxt（可选）
NuxtJs官方建议将 .nuxt 目录添加到 .npmignore 或 .gitignore列表中。
- 执行命令
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开头，否则会请求失败
- 注意，vercel部署的站点的访问地址是
- 其他提示：
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 命令就可以选择它了：
