为啥我不能在 docker 中构建这个 nuxtjs 应用程序，而本地构建工作？

Posted 2023-02-22

【中文标题】为啥我不能在 docker 中构建这个 nuxtjs 应用程序，而本地构建工作？

【英文标题】：Why can't I build this nuxtjs app inside docker, while local builds work?为什么我不能在 docker 中构建这个 nuxtjs 应用程序，而本地构建工作？

【发布时间】：2018-11-13 21:42:37

【问题描述】：

我正在 Mac 上开发这个 nuxtjs 项目（所有最新最好的），本地构建和生成工作正常。我使用sass-loader 作为开发依赖项，而我的nuxt.config.js 文件与默认文件没有太大区别：

module.exports = 
  head: 
    title: 'temp-www',
    meta: [
       charset: 'utf-8' ,
       name: 'viewport', content: 'width=device-width, initial-scale=1' ,
       hid: 'description', name: 'description', content: 'Nuxt.js project' 
    ],
    link: [
       rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' 
    ]
  ,
  modules: [
    [ 'nuxt-fontawesome', 
      component: 'fa',
      imports: [
         set: '@fortawesome/fontawesome-free-brands' ,
      ]
    ],
  ],
  loading:  color: '#3B8070' ,
  build: 
    extend (config,  isDev, isClient ) 
      if (isDev && isClient) 
        config.module.rules.push(
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        )
      
    
  

然后我像这样创建了一个Dockerfile

FROM node:stretch

ENV NODE_ENV=production
ENV HOST=0.0.0.0

RUN mkdir -p /app
COPY . /app
WORKDIR /app

EXPOSE 3000

RUN npm install
RUN npm run build
CMD ["npm", "start"]

（和适当的.dockerignore）但在构建图像时出现以下错误。

ERROR in ./layouts/default.vue
Module not found: Error: Can't resolve 'sass-loader' in '/app/layouts'
 @ ./layouts/default.vue 2:2-436
 @ ./.nuxt/App.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js

在那里和其他.vue 文件中，我在<style lang="scss"> 之类的块中使用sass。我尝试将其更改为sass，但没有任何区别。

奇怪的是，this question 说它应该通过将sass-loader 和 node-sass 作为运行时部门而不是 devtime 部门来工作。我对此持怀疑态度，但情况变得更糟，直到我将style 块中的lang 属性更改为scss 而不是sass。在这种情况下，并且仅在这种情况下，我正确构建了图像。

我错过了什么？

【参考方案1】：

你必须为 webpack 安装 sass-loader：

npm install sass-loader --save-dev

（参见官方文档“如何使用预处理器”（例如 sass）：https://nuxtjs.org/faq/pre-processors/）

---

但是将环境变量 NODE_ENV 设置为“生产”会导致 npm install 忽略 devDependencies。

所以你可以作为主要依赖安装：

npm install sass-loader --save

---

正确的方法是继续使用作为开发依赖项并在 CI 上构建您的应用，然后使用 NODE_ENV "production" 将其部署到您的生产环境中

【讨论】：

（我使用的是sass-loader）。按照您的建议，我仍然需要包含node_modules 目录，或者至少包含nuxt.config.js 中指定的模块。另一种方法是 generate 并用作静态文件。如果可能的话，我更喜欢使用build 而不是generated 代码。

并且您已经将 sass-loader 安装为依赖项 (--save) 或 devDependency (--save-dev) ？如果你想使用 NODE_ENV “生产”，你必须使用--save，如前所述。关于我的最后一个建议，这只是持续交付“只构建一次二进制文件，随处部署”的理念。使用带有 CI 平台（Jenkins、Travis、GitlabCI）的 node_modules 制作完整的 build，并将其部署到任何地方 :)

sass-loader 是一个 devDependency，我正在制作一个 build。正如您所说，问题在于 production 中忽略了 devDependencies - 我没有考虑过，我认为它更像是构建时/运行时的事情。 building 的问题，无论是在本地还是在 CI 中，都在于 webpack 在其配置中有 modules 需要在运行时可用。就我而言，sass 不是问题，因为一旦构建完成，它就完成了。但是，我在 webpack 的模块中有一个模块。没有办法告诉 webpack 将这些模块拉入构建中吗？ nuxt generate 似乎做到了。

我很困惑，我在 Docker 中重新做了一个build，但我没有遇到需要在node_modules 中的东西的问题。我昨天一定做错了什么。