从 Express 服务器以编程方式构建 Nuxt.js 时出错

Posted 2023-02-22

【中文标题】从 Express 服务器以编程方式构建 Nuxt.js 时出错

【英文标题】：Errors while building Nuxt.js programmatically from Express server

【发布时间】：2019-12-15 14:22:03

【问题描述】：

我正在尝试从我的 Express 服务器以编程方式运行 Nuxt，但在构建应用程序并打开浏览器控制台后出现了一些错误：

我的 nuxt.config.ts 看起来像：

import NuxtConfiguration from '@nuxt/config';

/**
 * Nuxt.js admin console app config.
 */
export const config: NuxtConfiguration =  
  /**
   * Directory paths options. Remove `rootDir` and `modulesDir` properties if you want to run/build admin console Nuxt app.
   */
  rootDir: 'src/admin-console',
  modulesDir: ['../../node_modules'],
  mode: 'universal',
  /*
  ** Headers of the page.
  */
  head: 
    title: process.env.npm_package_name || '',
    meta: [
       charset: 'utf-8' ,
       name: 'viewport', content: 'width=device-width, initial-scale=1' ,
       hid: 'description', name: 'description', content: process.env.npm_package_description || '' 
    ],
    link: [
       rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' 
    ]
  ,
  /*
  ** Customize the progress-bar color.
  */
  loading:  color: '#fff' ,
  /*
  ** Global CSS.
  */
  css: [
  ],
  /*
  ** Plugins to load before mounting the App.
  */
  plugins: [
  ],
  /*
  ** Nuxt.js modules.
  */
  modules: [
    // Doc: https://bootstrap-vue.js.org/docs/
    'bootstrap-vue/nuxt',
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
  ],
  /*
  ** Axios module configuration.
  ** See https://axios.nuxtjs.org/options
  */
  axios: 
  ,
;

export default config;

然后我将 Nuxt 构建为 Express 中间件：

import  Application  from 'express';
import  Nuxt, Builder  from 'nuxt';
import config from '../admin-console/nuxt.config';

/**
 * Builds admin console Nuxt app.
 * @param app Express application instance.
 */
export async function buildAdminConsoleNuxtApp(app: Application) 
  const nuxt = new Nuxt(config);
  try 
    await new Builder(nuxt).build();
   catch (error) 
    throw new Error(error);
  

  app.use('/admin', nuxt.render);

并像这样注册它：

await buildAdminConsoleNuxtApp(this.app);

在我找到的所有示例中，这是构建 Nuxt 的唯一方法，所以我不知道我做错了什么。构建的应用程序不会检测到点击事件等，并且无法正常运行。

【参考方案1】：

问题在于没有设置config.dev 属性，当以编程方式运行Nuxt 时，应该按照documentation 中所述使用该属性。

我现在工作的代码如下所示：

import  Application  from 'express';
import  Nuxt, Builder, Generator  from 'nuxt';
import config from '../admin-console/nuxt.config';
import  EnvType  from '../config/types';

/**
 * Builds admin console Nuxt.js/Vue.js application.
 * @param app Express application instance.
 */ 
export async function buildAdminConsoleNuxtApp(app: Application) 
  config.dev = process.env.NODE_ENV === EnvType.PRODUCTION;
  const nuxt = new Nuxt(config);
  try 
    const builder = await new Builder(nuxt);
    await new Generator(nuxt, builder).generate( build: true, init: true );
   catch (error) 
    throw new Error(error);
  

  app.use('/', nuxt.render);