在没有生成器的情况下以编程方式使用Nuxt

Question

我在nuxt.render中间件中以编程方式在express中使用nuxt，如下所示

const { Nuxt, Builder } = require('nuxt')
const app = require('express')()

const api = require('../api')
app.use('/api', api)

let config = require('../nuxt.config.js')
config.dev = !(process.env.NODE_ENV === 'production')

// Init Nuxt.js
const nuxt = new Nuxt(config)
app.use(nuxt.render)

async function start() {
// Build only in dev mode
  if (config.dev) {
    const builder = new Builder(nuxt)
    await builder.build()
  }

  // Listen the server
  app.listen(port, host)
  console.log('Server listening on ' + host + ':' + port)
}
start()

当我开发服务器api路由，并对服务器端api文件进行一些更改并重新启动服务器时，每次都会构建整个nuxt项目，这会花费太多时间。这很不方便，因为nuxt文件中没有更改，只有api路由文件中有更改。

因此，在构建一次之后，我注释掉以下代码行：

if (config.dev) {
// const builder = new Builder(nuxt)
// await builder.build()
}

然后重新启动服务器，当然不会启动nuxt构建器。但是我现在不能在浏览器上访问nuxt。服务器api路由可以工作，但是nuxt页面路由只显示"Nuxt loading…“。屏幕。

如何在开发模式下使用nuxt app，而不是每次都构建它？

Answer 1

这可能是一个有效的用例，有时人们不想为一个非常小的api/ui对使用两个服务器。我的建议也是有一个分离的模式，通过nuxt/proxy工作，你可以在你做开发工作的时候运行它。在分离模式下，nuxt单独工作，api也单独运行，nuxt通过‘nuxt/proxy’模拟上面的设置。通过在nuxt config中添加smth可以非常容易地进行设置

  modules: [
    ['@nuxtjs/proxy', {    "/api/": { target: 'http://localhost:888/api'} }]
  ]

在prod中，你可以像以前一样运行。

Answer 2

您可以使用build.parallel、build.cache和build.hardSource。这将极大地加快初始构建后的构建时间。

不过，对于生产构建，我并不推荐而不是推荐这样做。这就是我在代码中使用它的方式：

nuxt.config.js

const isDev = process.env.NODE_ENV === "development";

module.exports = {
// ...
  build: {
    parallel: isDev,
    cache: isDev,
    hardSource: isDev
  },
// ...
};

在package.json中，我将build脚本的NODE_ENV设置为production：

"scripts": {
  "build": "NODE_ENV=production nuxt build"
}

附注:您可能还需要为开发版本设置build.publicPath。