NUXTJS

模块是在引导next时顺序调用的函数。框架在继续之前等待每个模块完成。通过这种方式，模块可以自定义项目的几乎任何方面。next模块可以被合并到npm包中。这使得它们易于跨项目重用和与社区共享。

你是否曾经在做某件事时遇到了错误，或者只是需要得到某人的批准?有几个选项可以实现这一点，例如部署应用程序或创建<一个href="https://codesandbox.io" rel="nofollow noopener noreferrer" target="_blank">代码沙盒．但是另一个选择是共享localhost，这样当您在dev模式下进行实时更改时，任何拥有链接的人都可以看到它，无论它们在哪里。我们可以用<一个href="https://www.npmjs.com/package/ngrok" rel="nofollow noopener noreferrer" target="_blank">俄罗斯为了达到这个目的。

让我们创建一个使用<一个href="https://www.npmjs.com/package/ngrok" rel="nofollow noopener noreferrer" target="_blank">俄罗斯这样，当您运行dev命令时，可以在Nuxt CLI中看到一个公共URL。

此模块已经创建并部署，您可以通过安装<一个href="https://ngrok.www.lycasleep.com" rel="nofollow noopener noreferrer" target="_blank">@nuxtjs / ngrok模块．您还可以通过签出我们的<一个href="//www.lycasleep.com/examples/modules-internal">代码沙盒演示．但是，如果你有兴趣了解它是如何创建的，或者想创建自己的模块，那么继续阅读。

• 它是如何工作的？
• 让我们开始
• 创建模块
• 调查numxt.options
• 在next服务器侦听时启动ngrok隧道
• 添加一个authtoken
• ngrok在行动
• 将我们的URL添加到Nuxt CLI
• 关闭我们的ngrok
• 完整的代码示例
• 结论
• 进一步的探索

它是如何工作的？

ngrok将创建一个http-https-tcp隧道。查看<一个href="https://www.npmjs.com/package/ngrok" rel="nofollow noopener noreferrer" target="_blank">ngrok npm包更多细节。我们需要能够连接到一个ngrok端口时，numxt服务器正在监听。一旦我们得到了一个公共的URL，我们就想把它打印到Nuxt CLI上，这样我们就可以轻松地单击它来打开和共享它。

让我们开始

要在我们的应用程序中使用自定义模块，我们需要创建一个模块文件夹(如果你还没有的话)。让我们在里面创建一个名为ngrok的文件夹，并向其中添加一个index.js文件。您可以使用编辑器创建这些文件夹和文件，或者使用下面的命令。

mkdir模块模块/ ngrok触摸模块/ngrok/index.js

为了使用我们的模块，我们需要通过将它添加到<一个href="//www.lycasleep.com/docs/2.x/directory-structure/modules/">构建模块我们的numxt.config.js文件文件。BuildModules只在开发和构建时被导入，这对于我们的模块来说是完美的，因为我们只需要它在开发模式下工作。

出口默认的｛构建模块：［“~/modules/ngrok”］｝

因为我们将使用<一个href="https://www.npmjs.com/package/ngrok" rel="nofollow noopener noreferrer" target="_blank">ngrok npm包我们需要作为dev依赖项安装。

纱线添加- - - dev ngrok

npm公司安装- - - dev ngrok

创建模块

现在我们已经安装并注册了所有的东西，我们可以继续创建我们的模块了。我们要做的第一件事就是从我们的国家进口韩国node_modules文件夹到我们的索引.js我们的ngrok模块的文件。

进口俄罗斯从“ngrok”

然后，我们可以使用export default创建一个函数，该函数允许我们在另一个文件中使用该函数。

进口俄罗斯从“ngrok”出口默认的功能（）｛｝

在这个函数中，我们可以先对numxt进行解构，使其等于这，也就是说我们不用写了这个.nuxt每次我们提到next。

进口俄罗斯从“ngrok”出口默认的功能（）｛常数｛努克斯｝＝这//我的下一个模块代码在这里｝

调查numxt.options

我们只想在开发模式下运行ngrok，而不想在生产模式下运行，那么我们该怎么做呢？

首先让我们登录到控制台文本选项所以我们可以看到所有的下一步选择。这是numxt.config.js文件与默认值混合。

进口俄罗斯从“ngrok”出口默认的功能（）｛常数｛努克斯｝＝这慰问．日志（努克斯．选项）//我的下一个模块代码在这里｝

这里有很多价值。我们想要的是一种方式，当我们在开发模式，你将看到从控制台，在我们的文本选项我们有dev设置为是的．这意味着我们可以添加一个if语句来检查dev是否为false，如果不处于dev模式则返回。

进口俄罗斯从“ngrok”出口默认的功能（）｛常数｛努克斯｝＝这//不要在生产中使用ngrok如果（努克斯．选项．dev＝＝＝假）｛返回｝//更多信息如下：）｝

在next服务器侦听时启动ngrok隧道

我们希望在下一个服务器监听时启动ngrok隧道。为此，我们需要一种连接到next并侦听端口的方法，以便进行连接。这就是Nuxt钩子的作用所在。<一个href="//www.lycasleep.com/docs/2.x/internals-glossary/internals-nuxt">Nuxt钩子是next活动的听众。我们将使用nuxt.hook（）传入的值听后跟一个异步函数。在这个函数中，我们需要传入服务器，然后传入端口。

进口俄罗斯从“ngrok”出口默认的功能（）｛/ /[…]/ / //www.lycasleep.com/docs/2.x/internals-glossary/internals-nuxt挂钩努克斯．钩（“听着”，异步功能（服务器，｛港口｝）｛｝）｝

然后，我们等待ngrok连接传入port的值并将其分配给我们的url，url是在函数外部定义的。我们现在可以运行控制台.log在函数中查看url的结果。

进口俄罗斯从“ngrok”出口默认的功能（）｛/ /[…]让网址/ / //www.lycasleep.com/docs/2.x/internals-glossary/internals-nuxt挂钩努克斯．钩（“听着”，异步功能（服务器，｛港口｝）｛网址＝等待俄罗斯．连接（港口）//我们这里有我们的公共url慰问．日志（网址）｝）｝

现在，如果你运行dev命令并打开控制台，你会看到来自ngrok的url。打开该URL将显示你的网站在开发模式。

添加一个authtoken

虽然这应该工作，但我们可能会遇到一些关于最大连接和其他限制的问题，因此最好设置一个<一个href="https://ngrok.com/" rel="nofollow noopener noreferrer" target="_blank">身份验证令牌这可以从ngrok网站免费完成。

一旦我们有了我们的令牌，我们就可以建立我们的.环境文件并添加我们的令牌。

NGROK_TOKEN＝my-authtoken-from-ngrok

我们现在可以设置选项相当于我们公司ngrok财产的期权numxt.config.js文件或者等于一个空对象，以防我们没有定义任何选项。我们还添加了一个常量代币等于NGROK_TOKEN从我们的.环境文件或选项.token这和numxt.options.ngrok.token，如果该值是在俄罗斯我们公司的财产numxt.config.js文件．

然后我们可以等待ngrok authtoken传入令牌值。

进口俄罗斯从“ngrok”出口默认的功能（）｛/ /[…]//读取nuxt.config.js中定义的ngrok属性常数选项＝努克斯．选项．俄罗斯||｛｝常数代币＝过程．环境．NGROK_TOKEN||选项．代币/ /[…]｝

然后，我们可以等待ngrok authtoken传入的值代币我们在上面定义过。

进口俄罗斯从“ngrok”出口默认的功能（）｛/ /[…]//读取nuxt.config.js中定义的ngrok属性常数选项＝努克斯．选项．俄罗斯||｛｝常数代币＝过程．环境．NGROK_TOKEN||选项．代币/ / //www.lycasleep.com/docs/2.x/internals-glossary/internals-nuxt挂钩努克斯．钩（“听着”，异步功能（服务器，｛港口｝）｛如果（代币）｛等待俄罗斯．身份验证令牌（代币）｝网址＝等待俄罗斯．连接（港口）//我们这里有我们的公共url慰问．日志（网址）｝）｝

ngrok在行动

但它真的有效吗？如果我在开发过程中改变了什么，他们会在那个网址上看到吗？让我们看一看。如果我们转到索引页并添加一些文本。例如“URL from ngrok:”您现在将看到<一个href="http://localhost" rel="nofollow noopener noreferrer" target="_blank">本地服务器还有你打印到控制台的ngrok的url。多酷啊。

<p>来自ngrok的URL:p>

让我们把来自ngrok的url添加到vue模板中。我们可以使用publicRuntimeConfig来访问我们的ngrok url，然后使用publicRuntimeConfig来访问$配置从上下文。为此，我们将url分配给numxt.options.publicRuntimeConfig.ngrok. 我们现在可以移除控制台.log因为这已经不再需要了。

进口俄罗斯从“ngrok”出口默认的功能（）｛/ /[…]/ / //www.lycasleep.com/docs/2.x/internals-glossary/internals-nuxt挂钩努克斯．钩（“听着”，异步功能（服务器，｛港口｝）｛如果（代币）｛等待俄罗斯．身份验证令牌（代币）｝网址＝等待俄罗斯．连接（港口）//将公共url添加到公共runtimeConfig努克斯．选项．公共运行时配置．俄罗斯＝｛网址｝｝）｝

我们现在可以在Vue模板中使用$配置如果我们将它包装在一个链接标签中，那么它将是可点击的。

<模板><p>来自ngrok的URL:<一个：href＝＂$config.ngrok.url＂>{{config.ngrok美元。url}}一个>p>模板>

让我们运行dev服务器，现在您应该可以看到页面上打印的来自ngrok的URL。多酷啊。

将我们的URL添加到Nuxt CLI

通常，我们可能不想将URL打印到页面上。如果我们能将它添加到next CLI中，这样我们每次运行dev命令时都能看到它，并能够从那里点击并打开它，那就更好了。然后，我们可以与任何需要的人共享该链接，而不必在.vue文件或控制台中公开它。

我们可以通过文本选项. 您可以通过记录文本选项到控制台并搜索cli。如果你这样做了，你会发现我们有一个<一个href="//www.lycasleep.com/docs/2.x/configuration-glossary/configuration-cli">badgeMessages财产。这个绿框显示了环境，渲染和目标的信息以及应用正在监听的端口。

我们可以使用push ()方法将我们的URL推送到next CLI。

/ /[…]努克斯．钩（“听着”，异步功能（服务器，｛港口｝）｛/ /[…]//将公共url添加到CLI中的Nuxt框中努克斯．选项．客户端．badgeMessages．推（网址）｝）｝）

现在，当我们运行dev命令时，我们的url就会出现在绿色框中。当然，我们可以通过在URL之前添加一些文本来进一步改进这一点，以便用户知道它是什么。

/ /[…]努克斯．钩（“听着”，异步功能（服务器，｛港口｝）｛/ /[…]//将公共url添加到CLI中的Nuxt框中努克斯．选项．客户端．badgeMessages．推（｀公共URL:${网址｝｀）｝）｝）

我们还可以使用名为的包更改此链接的颜色并在其下面加下划线<一个href="https://www.npmjs.com/package/chalk" rel="nofollow noopener noreferrer" target="_blank">粉笔这使我们可以设计我们的终端。

进口俄罗斯从“ngrok”进口粉笔从“粉笔”/ /[…]

然后我们可以使用chalk.underline.yellow或者粉笔包里的其他颜色。

进口俄罗斯从“ngrok”进口粉笔从“粉笔”/ /[…]努克斯．钩（“听着”，异步功能（服务器，｛港口｝）｛/ /[…]//用粉笔改变颜色努克斯．选项．客户端．badgeMessages．推（｀公共URL:${粉笔．下划线．黄色的（网址）｝｀）｝）｝

现在您将看到，在运行dev命令时，我们的公共URL带有下划线和黄色的链接。然后可以点击并打开它，当然可以与世界上任何地方的任何人共享，这样他们就可以在dev模式下实时观看您的更改。

关闭我们的ngrok

当我们关闭Nuxt时，我们应该关闭我们的ngrok连接。要做到这一点，我们可以钩住Nuxt，寻找它何时关闭，并运行一个函数来断开ngrok的连接。

/ /[…]出口默认的功能（）｛/ /[…]努克斯．钩（“关闭”，功能（）｛网址& &俄罗斯．断开（）｝）｝

完整的代码示例

进口俄罗斯从“ngrok”进口粉笔从“粉笔”出口默认的功能（）｛常数｛努克斯｝＝这//不要在生产中使用ngrok如果（努克斯．选项．dev＝＝＝假）｛返回｝//读取nuxt.config.js中定义的ngrok属性常数选项＝努克斯．选项．俄罗斯||｛｝常数代币＝过程．环境．NGROK_TOKEN||选项．代币/ / //www.lycasleep.com/docs/2.x/internals-glossary/internals-nuxt挂钩努克斯．钩（“听着”，异步功能（服务器，｛港口｝）｛如果（代币）｛等待俄罗斯．身份验证令牌（代币）｝网址＝等待俄罗斯．连接（港口）//将公共url添加到公共runtimeConfig努克斯．选项．公共运行时配置．俄罗斯＝｛网址｝//将公共url添加到CLI中的Nuxt框中努克斯．选项．客户端．badgeMessages．推（｀公共URL:${粉笔．下划线．黄色的（网址）｝｀）｝）努克斯．钩（“关闭”，功能（）｛网址& &俄罗斯．断开（）｝）｝

结论

我们刚刚创建了可以在项目中使用的本地模块。有时这就足够了，但有时我们想要跨项目共享我们的模块，或者更好，与next社区共享。要做到这一点，我们需要使用模块模板创建我们的模块，并将其发布到npm。

到今天为止，我们正在努力改进这个模板，使它对用户更友好。所有模块都是使用typescript创建的，应该包含测试、文档和示例。

进一步的探索

检查我们的<一个href="//www.lycasleep.com/examples/modules-internal">CodeSandbox例子对于本模块。

看看我们出版的<一个href="https://ngrok.www.lycasleep.com/" rel="nofollow noopener noreferrer" target="_blank">ngrok模块．

看看我们的名单<一个href="https://modules.www.lycasleep.com/" rel="nofollow noopener noreferrer" target="_blank">Nuxt模块．