Heroku 上的 Nuxt.js Webpack 构建错误

Question

我有一个 Nuxt.js 项目，我现在只添加了几个组件。如果在本地构建，它可以完美运行。我想在 Heroku 上对其进行测试，但是我得到了一些与 webpack 相关的构建错误，我已经埋葬了 3 天。

remote:        ERROR in ./~/babel-loader/lib?{"plugins":["transform-async-to-generator","transform-runtime"],"presets":[["es2015",{"modules":false}],"stage-2"],"cacheDirectory":false}!./~/vue-loader/lib/selector.js?type=script&index=0!./layouts/default.vue
remote:        Module not found: Error: Can't resolve '../components/Sidebar/_Sidebar.vue' in '/tmp/build_fe4d2e874dff634cf8c7db3886460988/layouts'
remote:        @ ./~/babel-loader/lib?{"plugins":["transform-async-to-generator","transform-runtime"],"presets":[["es2015",{"modules":false}],"stage-2"],"cacheDirectory":false}!./~/vue-loader/lib/selector.js?type=script&index=0!./layouts/default.vue 30:0-57
remote:        @ ./layouts/default.vue
remote:        @ ./~/babel-loader/lib?{"plugins":["transform-async-to-generator","transform-runtime"],"presets":[["es2015",{"modules":false}],"stage-2"],"cacheDirectory":false}!./~/vue-loader/lib/selector.js?type=script&index=0!./.nuxt/App.vue
remote:        @ ./.nuxt/App.vue
remote:        @ ./.nuxt/index.js
remote:        @ ./.nuxt/server.js

我还安装了 nuxtjs.org 入门主题的新副本，但没有错误。它像魅力一样建造。

这是我的 package.json

 {
      "name": "some-nuxt",
      "version": "0.3.0",
      "description": "nuxt-sandbox ",
      "private": true,
      "dependencies": {
        "axios": "^0.15.3",
        "nuxt": "^0.9.9",
        "vue-touch": "^2.0.0-beta.4"
      },
      "scripts": {
        "dev": "nuxt",
        "build": "nuxt build",
        "start": "nuxt start",
        "generate": "nuxt generate",
        "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
        "precommit": "npm run lint",
        "heroku-postbuild": "npm run build"
      },
      "devDependencies": {
        "ava": "^0.18.2",
        "babel-eslint": "^7.1.1",
        "eslint": "^3.16.0",
        "eslint-config-standard": "^6.2.1",
        "eslint-loader": "^1.6.1",
        "eslint-plugin-html": "^2.0.1",
        "eslint-plugin-promise": "^3.4.2",
        "eslint-plugin-standard": "^2.0.1",
        "jsdom": "^9.11.0",
        "node-sass": "^4.5.0",
        "sass-lint": "^1.10.2",
        "sass-loader": "^6.0.2"
      }
    }

这是我的 nuxt.config.js 文件中的一些自定义设置。

          css: [
            // '~assets/css/main.css',
            { src: '~assets/scss/app.scss', lang: 'sass' } // scss instead of sass
          ],
          ...
          alias: {
            'hammerjs$': 'vue-touch/dist/hammer-ssr.js'
          },
          build: {
            /*
            ** Run ESLINT on save
            */
            vendor: ['axios', 'vue-touch'],
            extend (config, { isClient }) {
              if (isClient) {
                config.module.rules.push({
                  enforce: 'pre',
                  test: /\.(js|vue)$/,
                  loader: 'eslint-loader',
                  exclude: /(node_modules)/
                })
              }
            }
          },
          plugins: ['~plugins/vue-touch']
        }

Answer 1

我找到了Heroku服务器的区分大小写的文件系统Linux和我的不区分大小写的系统冲突的原因。当我将子组件重命名为大写时，Github 并没有将更改推送到 repo。

npm run dev 和 npm run build 都没有在我的计算机中出现任何错误。但是，当 Linux 正在寻找文件夹的确切名称时，问题就出现了。

这可能是一种预防措施，在干净的区分大小写的格式化分区上工作：https://coderwall.com/p/mgi8ja/case-sensitive-git-in-mac-os-x-like-a-pro

文档的标题解释得最好。 http://timnew.me/blog/2013/04/18/mac-os-x-case-insensitive-file-system-pitfall/

Answer 2

加上 Gokhan Ozdemir 的回答。我遇到了类似的问题，并意识到我已经以区分大小写的方式更改了文件夹的名称。

示例：从fonts 到Fonts

这似乎与 mac OS 是不区分大小写的环境有关。

我可以通过以下步骤解决它：

 git mv fonts fonts2
 git mv fonts2 Fonts
 git commit -m "changed case of dir"

请注意，我最初必须更改为 fonts2，以便有效地进行区分大小写的重命名。

这是SO answer 解释此问题的解决方案。