node.js - 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 没有将更改推送到存储库。

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/