NUXT部署在Heroku错误上找不到模块＆＃x27; defu＆＃x27;从＆＃x27;/app＆＃x27;

Question

在Stackoverflow上有史以来第一个问题，请原谅我在代码和此处的无知。 因此，我正在尝试将NUXT应用程序部署到Heroku。到目前为止，我有一个可行的版本，但是经过许多本地更改后，新部署不起作用。 我使用NPM Run Build在本地运行该应用程序，然后NPM运行启动，并且可以正常运行。 但是，当我与Heroku一起部署时

git push heroku development:master

，页面不起作用，日志说：

2022-06-06T16:10:53.395913+00:00 app[web.1]:  ERROR  Cannot find module 'defu' from '/app'
2022-06-06T16:10:53.395914+00:00 app[web.1]: 
2022-06-06T16:10:53.395915+00:00 app[web.1]:   at Function.resolveSync [as sync] (node_modules/resolve/lib/sync.js:111:15)
2022-06-06T16:10:53.395915+00:00 app[web.1]:   at node_modules/vue-server-renderer/build.prod.js:1:77905
2022-06-06T16:10:53.395916+00:00 app[web.1]:   at Object.<anonymous> (webpack:/external "defu":1:0)
2022-06-06T16:10:53.395916+00:00 app[web.1]:   at __webpack_require__ (webpack/bootstrap:25:0)
2022-06-06T16:10:53.395916+00:00 app[web.1]:   at Module.<anonymous> (server.js:5594:22)
2022-06-06T16:10:53.395917+00:00 app[web.1]:   at __webpack_require__ (webpack/bootstrap:25:0)
2022-06-06T16:10:53.395917+00:00 app[web.1]:   at Object.<anonymous> (server.js:1940:18)
2022-06-06T16:10:53.395917+00:00 app[web.1]:   at __webpack_require__ (webpack/bootstrap:25:0)
2022-06-06T16:10:53.395918+00:00 app[web.1]:   at server.js:118:18
2022-06-06T16:10:53.395918+00:00 app[web.1]:   at Object.<anonymous> (server.js:121:10)

我无法设法找到与此相关的任何内容，因此将不胜感激。 谢谢

编辑 如果有帮助，这是我的package.json和nuxt.config.js

{
  "name": "rutero-front",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-brands-svg-icons": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/vue-fontawesome": "^2.0.6",
    "@nuxtjs/auth-next": "5.0.0-1648802546.c9880dc",
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/fontawesome": "^1.1.2",
    "bootstrap": "^4.6.1",
    "bootstrap-vue": "^2.22.0",
    "core-js": "^3.19.3",
    "node-sass": "^6.0.1",
    "nuxt": "^2.15.8",
    "v-calendar": "^2.4.1",
    "vue": "^2.6.14",
    "vue-burger-menu": "^2.0.5",
    "vue-feather-icons": "^5.1.0",
    "vue-flux": "^6.4.0",
    "vue-iframes": "^0.0.19",
    "vue-server-renderer": "^2.6.14",
    "vue-smooth-reflow": "^0.1.12",
    "vue-star-rating": "^1.7.0",
    "vue-template-compiler": "^2.6.14",
    "vue2-google-maps": "^0.10.7",
    "webpack": "^4.46.0"
  },
  "devDependencies": {
    "@nuxt/postcss8": "^1.1.3",
    "@nuxtjs/style-resources": "^1.2.1",
    "autoprefixer": "10.4.5",
    "fibers": "^5.0.1",
    "node-sass": "^6.0.1",
    "postcss": "^8.4.12",
    "sass-loader": "^10.2.1",
    "tailwindcss": "^3.0.24"
  }
}

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'rutero-front',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.png' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    '@/assets/css/main.css',
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    { src: '~plugins//vue-burger-menu', mode: 'client' },
    { src: '~/plugins/star-rating.js', mode: 'client'},
    { src: '~/plugins/vue-google-maps.js' },
    { src: '~plugins/v-calendar.js', mode: 'client' },
    { src: '~/plugins/vue-iframes.js', mode: 'client' },
    '@/plugins/bootstrap-vue',
    { src: '~/node_modules/vue-flux', mode: 'client' }
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    '@nuxtjs/fontawesome',
    '@nuxt/postcss8',

  ],

  fontawesome: {
    component: 'fa',
    icons:{
     solid:true,
     brands:true
    }
   },

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    '@nuxtjs/auth-next'
  ],
  


  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308

    baseURL: "http://localhost:8080",
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    postcss: {
      plugins: {
        'tailwindcss/nesting': {},
        tailwindcss: './tailwind.config.js',
        autoprefixer: {},
      },
    },
    transpile: [/^vue2-google-maps($|\/)/],
  }
}

Answer 1

好的，如果某人遇到相同的问题，这更像是解决方法。显然，这与Bootstrap有关。我在package.json文件上对bootstrap-vue和bootstrap进行了奇怪的配置。

我设法部署到Heroku，当我删除与Bootstrap有关的所有内容时，没有出现错误，并且只是将Bootstrap-vue的依赖性保持在poffage.json.json和这一行中，而这一行“ bootstrap-vue/nuxt”'在nuxt.config.js的“模块”部分上。

删除了.nuxt，package-lock.json和Node-Modules文件夹，然后ran npm安装。现在使用Bootstrap的一些组件现在看起来很糟糕，但是至少该应用程序可以在Heroku和本地部署。

还添加了ENV变量NPM_Config_production并将其设置为false在Heroku上，因为Bootstrap的一些依赖项（Fibers，AutoPrefixer等）在DevDepentencies中，我也认为它们也需要Bootstrap-vue。

我仍然会玩，看看问题是什么。但是，是的，它的引导程序。

希望这对某人有帮助。