Nuxt.js学习(九) --- 静态应用部署、单页应用程序部署

喜欢而已 提交于 2020-01-07 18:12:18

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

[TOC]

一、静态应用部署

官方文档:

Nuxt.js 可依据路由配置将应用静态化,使得我们可以将应用部署至任何一个静态站点主机服务商。

可利用下面的命令生成应用的静态目录和文件:

npm run generate

这个命令会创建一个 dist 文件夹,所有静态化后的资源文件均在其中。

如果你的项目需要用到动态路由,请移步 generate配置API 了解如何让 Nuxt.js 生成此类动态路由的静态文件。

注意:使用 nuxt generate 静态化应用的时候, 传给 asyncData()fetch() 方法的上下文对象 不会包含 reqres 两个属性。

二、单页面应用程序部署 (SPA)

nuxt generate 在 build/generate 时间内仍然需要SSR引擎,同时具有预渲染所有页面的优势,并具有较高的SEO优化和页面加载能力。 内容在构建时生成。例如,我们不能将它用于内容依赖于用户身份验证或实时API的应用程序(至少对于第一次加载)。

SPA应用的想法很简单! 使用时启用SPA模式 mode: 'spa'--spa,并且我们运行打包,生成在导报后自动启动,生成包含常见的meta和资源链接,但不包含页面内容。

因此,对于SPA部署,您必须执行以下操作:

  • nuxt.config.js中的mode更改为spa
  • 运行 npm run build.
  • 自动生成dist/文件夹,部署到您的服务器,如Surge,GitHub Pages或nginx。

另一种可能的部署方法是在spa模式下将Nuxt用作框架中的中间件。这有助于减少服务器负载,并在无法进行SSR的项目中使用Nuxt。

请参考 如何在 Heroku 上部署? 来查看更多部署信息。

请参考 如何在 GitHub Pages 上部署? 查看如何部署到GitHub页面的更多详细信息。

三、操作实例

3.1、新建一个test.vue页面引入图片

"~"相当于定位到了项目根目录,图片路径不会出错,打包也是正常的

3.2、打包静态HTML并运行

用Nuxt.js制作完成后,你可以打包成静态文件并放在服务器上,进行运行。

终端输入:

npm run generate

会自动生产dist文件夹

3.3、在Visual Code中打开dist文件夹(可重命名)

首先安装live-server

npm install -g live-server

然后输入

live-server

3.4、效果(test.vue页面)

可以看到打包完成后的静态资源效果都在

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!