时间戳

首页 > 解决方案 > 使用 Lerna 时，Heroku 上的 Vue 构建失败

node.js - 使用 Lerna 时，Heroku 上的 Vue 构建失败

问题描述

尝试在 Heroku 上使用 Express 后端 + Vue 前端托管 Lerna monorepo。组件分别包含在/packages/server和内部/packages/frontend。目的是在部署期间构建 Vue 前端，并通过 Express 将其作为静态内容托管。

./package.json

{
  "name": "my_app",
  "private": true,
  "scripts": {
    "bootstrap": "lerna bootstrap",
    "start": "lerna run start --stream",
    "postinstall": "npm run bootstrap",
    "build": "lerna run build --stream"
  },
  "devDependencies": {
    "lerna": "^3.20.2"
  }
}

我的构建阶段失败是由于

lerna notice cli v3.20.2
lerna info Executing command in 2 packages: "npm run build"
       frontend: > frontend@0.1.0 build /tmp/build_c2cbb32af790fe0e5e4852ce2bcab8e0/packages/frontend
       frontend: > vue-cli-service build
frontend: sh: 1: vue-cli-service: not found
frontend: npm ERR! code ELIFECYCLE
frontend: npm ERR! syscall spawn
frontend: npm ERR! file sh
frontend: npm ERR! errno ENOENT
frontend: npm ERR! frontend@0.1.0 build: `vue-cli-service build`
frontend: npm ERR! spawn ENOENT

独立的 Vue 存储库不会以这种方式使其构建阶段失败，因此问题很可能是出现问题lerna bootstrap或 Heroku 构建事物的方式，但我无法弄清楚问题是什么。

create-react-app 的类似设置不会失败，可能是因为它react-scripts是一个常规依赖项。

Lerna 和 devDependencies 是否有一些我遗漏的问题，或者这是 Vue 的问题？

标签： node.jsvue.jsherokunpmlerna

解决方案

几天后，我终于弄清楚设置有什么问题。问题有两个方面：

首先，似乎 vue-cli@4.3.0 可能存在问题，因为即使启动独立项目也将无法构建，NODE_ENV=production因为所有必需的依赖项都包含在 devDependencies 中。

npx @vue/cli create test
cd test
export NODE_ENV=production
npm install
npm run build

对于本地开发，lerna bootstrap按预期遵守 NODE_ENV，甚至安装 devDependencies。但是，当它作为 CI 的一部分运行时，会跳过 devDependencies。

至于为什么独立的 Vue 项目在 Heroku 上构建而没有任何问题，这在 nodejs buildpack文档中有详细说明

默认情况下，Heroku 将安装 package.json 中列出的所有依赖项，位于 dependencies 和 devDependencies 下。

buildpack 仅适用于单层包，因此一旦您在 monorepo 布局中嵌套了包，就不会触及嵌套的 devDependencies。

将 Vue 依赖项从 devDependencies 中移出解决了我现在的构建问题。

推荐阅读