用户登录

我们可以把开发好的 Nuxt 应用部署到一些第三方服务商提供的服务上,比如 Vercel 就是其中的一个,在这个平台我们可以部署不同类型的前端应用,Vercel 是 Next.js 框架的作者。先在 vercel.com 这个网站上注册一个帐户,登录以后打开 Dashboard,一会儿部署成功的应用会出现在这个地方。

在终端,npm install vercel 加上 --global 选项,这样可以在系统的全局安装一下 vercel 命令行工具。安装成功以后,执行一下 vercel login 登录一下,执行 Continue with Github,使用 Github 帐户登录。

成功以后,在项目的下面,输入 vercel deploy,执行一下这个部署命令,这个命令会问我们一些问题,首先提示是否要部署当前这个项目,输入 Y 然后回车。

然后让我们选择部署的范围,使用默认的就行,直接回车。是否要链接到已有项目,输入 n 表示不链接已有项目。再输入项目的名字,直接回车。项目的代码在哪里,一个点加上一条斜线表示当前目录的下面。

vercel 可以自动检查出要部署的这个项目用的是 Nuxt 框架,默认给出了一些配置,如果不想改变这些设置,可以直接回车。

这样 vercel 会自动创建项目,然后部署应用。

成功以后在 vercel 的 dashboard 里面可以看到部署的项目,打开它,然后点击访问这个应用。现在你看到的就是部署在 vercel 上的应用。

注意我们在访问 vercel.app 这个网址的时候可能会遇到问题,所以一般情况下我们都需要绑定自己的域名。

在项目的设置里面,打开 domains,我提前配置好了一个域名,指向了 vercel ,在域名这里输入 ninghao-nuxt-vercel.ninghao.co,然后点击添加。

注意这里你需要提前按 vercel 的规定,配置好域名,一般就是添加一条 cname 类型的 dns 记录。

验证成功以后,vercel 会给这个域名申请签发 ssl 证书。完成以后,可以点击访问一下。

再回到项目的配置,打开 Environment Variables ,环境变量,这里你可以配置应用的环境变量,比如添加一个 NUXT_PUBLIC_API_BASE_URL,它的值是服务端应用接口的基本地址,可以设置成 https://nid-node.ninghao.co

然后再点击 Save,保存一下。

再回到我们的项目,在项目根目录的下面,会多出一个 .vercel 目录,里面有个 project.json 文件,这个文件里记录了我们的项目在 vercel 上的组织的 ID,还有项目的 ID。

将 Nuxt 应用部署到 Vercel《 Nuxt.js:应用部署 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点