当前位置: 首页>移动开发>正文

前端jquery 导出后台响应的word文档 js导出html

Next.js是一个新的通用JavaScript框架,它为基于React和服务器的Web应用提供了一个新的可选方案。

部署webhtml" class="superseo">应用程序的最佳方式是作为静态HTML应用程序,如果可能的话。使用静态应用程序,您可以使用像NGINX这样的快速高效的web服务器,或者像ZEIT now或GitHub页面这样具有成本效益的静态托管服务。

但并不是所有的应用都可以作为静态应用来部署,如果你的应用需要在运行时生成动态页面,你就不能将它作为一个静态应用来部署。

如果你可以将你的应用归类为静态应用,您可以使用next.js来构建它。

Next.js3.0带来了新的特性允许你把一个应用程序作为静态页面导出。

在这节课中,我们将探讨这个特性。

让我们开始吧。

在这节课中,我们需要一个简单的Next.js应用程序。试着下载下面的示例应用程序。

(这是我们在之前的课程中创建的博客应用。)

git clone https://github.com/arunoda/learnnextjs-demo.git
cd learnnextjs-demo
git checkout static-blog-base

你可以执行以下命令:

npm install
npm run dev

导出首页

现在,我们将导出首页(pages/index.js)作为一个静态HTML页面。

首先,创建一个名为 next.config.js 的文件,在你的应用程序的根目录,并添加以下内容:

module.exports = {
exportPathMap: function () {
return {
'/': { page: '/' }
}
}
}

然后将下面的NPM脚本添加到package.json中。

"scripts": {
"build": "next build",
"export": "next export"
}

然后运行以下命令:

npm run build
npm run export

现在,您可以在项目中看到一个名为“out”的目录中的导出的HTML内容。

这是一个功能齐全的静态网页应用,你可以把它部署到任何静态主机服务上,而且效果很好。

但在此之前,我们需要在本地测试它。

为了测试这款应用,请在全局安装 serve NPM模块:

npm install -g serve

“serve”是一个非常简单的静态web服务器。您也可以使用其他类似的工具。

但是为了让事情变得简单,使用 serve 在这一课中。

在安装了“serve”之后,可以从应用程序根下面运行以下命令:

cd out

serve -p 8080

现在,您可以使用:http://localhost:8080来访问您的静态应用程序。

一切都应该照常工作。

你如何描述输出?

只有首页

正如您所经历的那样,您将得到一个“Not Found”的页面作为内容。当你试图直接访问页面时,你会得到它。除了首页(/),您还可以看到其他页面的相同行为。

这就是这里发生的事情:

您可以通过客户端访问所有页面,因为应用程序加载了相关的JavaScript内容。但是当您尝试直接加载它时,它就没有HTML内容可以使用。

那是因为我们只在Next.js导入出首页 index(/)的原因。

看看我们添加的配置:

module.exports = {
exportPathMap: function () {
return {
'/': { page: '/' }
}
}
}

导出其它页面

现在,让我们试着进出口和所有其他页面。

为此,向next.config.js文件 添加以下内容:

module.exports = {
exportPathMap: function () {
return {
'/': { page: '/' },
'/about': { page: '/about' },
'/p/hello-nextjs': { page: '/post', query: { title: "Hello Next.js" } },
'/p/learn-nextjs': { page: '/post', query: { title: "Learn Next.js is awesome" } },
'/p/deploy-nextjs': { page: '/post', query: { title: "Deploy apps with Zeit" } }
}
}
}

正如上面的配置所示,/about 路径与 / 路径非常相似。但其他的则有些不同。

这里是这样的:

为了在我们的应用中呈现博客文章,我们有一个单独的页面叫做/post。我们通过查询字符串将不同的内容传递给该页面。

因此,在导出应用程序时,我们还需要提供这些查询字符串。

这就是我们用上面的配置来处理所有页面,从/p/开始。

现在关闭已经运行的应用程序,并在你的应用程序根中运行以下命令:

npm run build
npm run export
cd out
serve -p 8080

现在,您将能够访问以下页面而没有任何问题:

让我们做一个简单的任务。

在您的配置中添加以下内容:

'/p/exporting-pages': { page: '/post', query: { title: "Learn to Export HTML Pages" } }

我们的最终配置将是这样的:

module.exports = {
exportPathMap: function () {
return {
'/': { page: '/' },
'/about': { page: '/about' },
'/p/hello-nextjs': {page: '/post', query: { title: "Hello Next.js" } },
'/p/learn-nextjs': { page: '/post', query: { title: "Learn Next.js is awesome" } },
'/p/deploy-nextjs': { page: '/post', query: { title: "Deploy apps with Zeit" } },
'/p/exporting-pages': { page: '/post', query: { title: "Learn to Export HTML Pages" } }
}
}
}

然后关闭当前的“serve”实例,并在应用程序根中运行以下命令:

npm run export
cd out
serve -p 8080

不需要总是构建

如您所见,我们可以访问页面而不会有任何问题。这个页面在/页面中是不可用的,但是我们可以为它生成静态HTML。

这是因为导出的HTML完全由我们添加到的配置控制 next.config.js.

为了导出该页面,这些是我们调用的命令:

npm run export
cd out
serve -p 8080

正如您所看到的,没有 npm run build 命令。这是为什么呢?

页面已经在那里了

next.js 在运行下一个导出命令时,js不会构建应用程序。在这种情况下,在构建中已经存在/post页面,并且不需要再次构建整个应用程序。

但如果我们对这款应用做了任何改动,我们就需要再次开发应用来获得这些变化。

部署应用程序

部署应用程序非常简单。只需访问“out”目录,并将其部署到您最喜欢的静态主机服务。

如果你现在用的是ZEIT now,这是如何做到的:

cd out
now
Paste_Image.png

就是这样

这都是关于next.js的静态HTML导出特性。你可以开发你的应用,通常是 next (也就是:npm run dev),当你部署这个应用的时候,你可以把它导出为一个静态应用。

但是,如果您需要在部署应用程序后动态创建页面,那么这不是解决方案。

为此,您需要构建应用程序,并在开始时启动它,或者使用我们的programmatic API。


https://www.xamrdz.com/mobile/49n1963941.html

相关文章: