Question

我现在在Nuxt中遇到一个问题，我想做的是根据我在API中检索到的值生成一个静态网站。

当然，我需要一些图书馆来：

检索页面（Axios）
从markdown更改为html（已标记）
也许以后再来..

这些事情应该在生成期间完成，即在服务器端。如果我执行npm run generate，则看不到脚本文件中捆绑的那些库。不过，我在运行npm build --analyze时确实看到了它们，因此我有99％的把握确保它们也在npm run generate中。

我尝试了不同的解决方案，仅在process.server， importing 和 requireing 时在asyncData中使用这些库，但是无论我在做什么，我都在看库之后在vendors.pages/index.js中，当我分析

您对此有任何解决方案吗？也许在generate上使用有效负载会避免这种情况，但是我怀疑：/而且据我所知，有效负载更多用于子页面。.我正在使用此API内容生成索引内容，所以有点棘手。.

任何帮助将不胜感激！

Answer 1

我想我可能有解决方案，请告诉我这是否正确，或者您还有其他建议！

好吧，对于任何对此感到困惑的人，Nuxt不和谐的解决方案之一就是在nuxt.config.js中使用externals

然后您应该以这种方式更改nuxt.config.js：

build: {
  extend (config, ctx) {
    if (ctx.isClient) {
      config.externals = {
      // removing axios from the bundled library
      axios: 'axios'
    }
  }
}

这样做实际上是从客户端的捆绑包中删除axios。不确定这是否是最好的解决方案，但看起来可行！

Answer 2

外部解决方法将axios从所有客户端脚本中排除，但是稍后页面可能需要axios。

我建议使用webpack的代码拆分：

import('axios').then(function (axiosModule) {
  const axios = axiosModule.default; 
  // axios stuff
});

或者如果您在异步等待方面遇到麻烦：

   public override bool Equals(Ship obj) 
   {
       if (this.Width != obj.Width)
       {
           return false;
       }  

       return true;
   }

这将为axios创建一个单独的捆绑包，仅在需要时才加载。

NuxtJs 2.0-如何避免捆绑客户端不需要的库

2 个答案: