部署到heroku时如何自动构建SPA答案

【问题标题】：How can I auto build SPA when deploy to heroku部署到heroku时如何自动构建SPA
【发布时间】：2019-08-24 01:23:01
【问题描述】：

我正在学习将我的 Vue 应用程序部署到 Heroku。我正在将我的代码部署到 Heroku，我希望它自动将我的代码构建到 dist/ 文件夹。我尝试配置包文件。但我总是得到一个错误。部署后自动构建 Vue 应用程序的最佳方式是什么？

我的代码结构：

api/
auth/
package.json

client/
__package.json
__src/

根包文件

"scripts": {
  "postinstall": "npm install --prefix client",
  "build": "cd client && npm run build"
}

Vue 应用中的包文件

{
  "name": "vue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@fortawesome/fontawesome": "^1.1.8",
    "@fortawesome/fontawesome-free": "^5.6.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.9",
    "@fortawesome/free-brands-svg-icons": "^5.6.0",
    "@fortawesome/free-regular-svg-icons": "^5.6.0",
    "@fortawesome/free-solid-svg-icons": "^5.6.0",
    "@fortawesome/vue-fontawesome": "^0.1.3",
    "animate.css": "^3.7.0",
    "axios": "^0.18.0",
    "bootstrap": "^4.1.3",
    "moment": "^2.22.2",
    "register-service-worker": "^1.5.2",
    "vue": "^2.6.6",
    "vue-axios": "^2.1.4",
    "vue-class-component": "^6.0.0",
    "vue-fullcalendar": "^1.0.9",
    "vue-property-decorator": "^7.0.0",
    "vue-router": "^3.0.1",
    "vue-session": "^1.0.0",
    "vue-textarea-autosize": "^1.0.4",
    "vue-toasted": "^1.1.26",
    "vuejs-datepicker": "^1.5.3",
    "vuex": "^3.0.1",
    "vuex-class": "^0.3.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.4.0",
    "@vue/cli-plugin-pwa": "^3.4.0",
    "@vue/cli-plugin-typescript": "^3.4.0",
    "@vue/cli-service": "^3.4.0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.1.0",
    "typescript": "^3.0.0",
    "vue-template-compiler": "^2.5.21"
  }
}

登录 Heroku

-----> Node.js app detected

-----> Creating runtime environment

       NPM_CONFIG_LOGLEVEL=error
       NODE_ENV=production
       NODE_MODULES_CACHE=true
       NODE_VERBOSE=false

-----> Installing binaries
       engines.node (package.json):  unspecified
       engines.npm (package.json):   unspecified (use default)

       Resolving node version 10.x...
       Downloading and installing node 10.15.3...
       Using default npm version: 6.4.1

-----> Restoring cache
       - node_modules (not cached - skipping)

-----> Installing dependencies
       Installing node modules (package.json)

       > gym_schedule@1.0.0 postinstall /tmp/build_d350166995249e94786090e39036fa51
       > npm install --prefix server && npm install --prefix client


       > nodemon@1.18.10 postinstall /tmp/build_d350166995249e94786090e39036fa51/server/node_modules/nodemon
       > node bin/postinstall || exit 0

       Love nodemon? You can now support the project via the open collective:
        > https://opencollective.com/nodemon/donate

       added 772 packages from 997 contributors and audited 14644 packages in 20.244s
       found 0 vulnerabilities

       added 34 packages from 39 contributors and audited 32176 packages in 15.597s
       found 0 vulnerabilities

       up to date in 37.279s
       found 0 vulnerabilities

-----> Build
       Running build

       > gym_schedule@1.0.0 build /tmp/build_d350166995249e94786090e39036fa51
       > cd client && npm run build


       > vue@0.1.0 build /tmp/build_d350166995249e94786090e39036fa51/client
       > vue-cli-service build

sh: 1: vue-cli-service: not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! vue@0.1.0 build: `vue-cli-service build`

【问题讨论】：

上面写着vue-cli-service: not found。所以要么没有安装，要么找不到，要么无法执行。
@RolfBly 我刚刚更新了 vue 应用程序中的一个包文件和完整的 heroku 日志。我认为在安装vue-cli-service 时会运行构建命令。

标签： vue.js heroku npm deployment vue-cli

【解决方案1】：

在前半部分你做得很好：package.json#build 精确运行脚本以便在 Heroku 的远程环境上构建。

问题是，在这个环境中，你的全局包（你通过npm install -g <package-name>安装的那个不可用！vue-cli-service就是这种情况，它必须包含在package.json#devDependencies中，或者干脆运行@ 987654325@ 在您的本地仓库中并再次部署。

【讨论】：

我刚刚在 vue app 中更新了一个包文件并完整地更新了 heroku 日志。在这个包文件中，我在devDependencies 中有vue-cli-service。我认为在安装软件包时会运行构建命令。

【解决方案2】：

我找到了解决方案。 Heroku 将忽略 devDependencies 中的包。我关闭了heroku config:set NPM_CONFIG_PRODUCTION=false YARN_PRODUCTION=false，Heroku 工作正常。

Heroku 的文档：https://devcenter.heroku.com/articles/nodejs-support#build-behavior

【讨论】：

【解决方案3】：

我可以在您的结构中看到您有一个带有 package.json 的客户端文件夹，其中包含 vue devDependencies。这个问题可以通过将你的 vue devDependencies 移动到根 package.json devDependencies 来解决。

为了在 Heroku 中自动构建 dist 文件夹，我实施的一个解决方案是在根文件夹中创建一个 nodejs 服务器。 server.js 有以下内容：

const express = require('express');
const path = require('path');
const serveStatic = require('serve-static');

let app = express();
app.use(serveStatic(__dirname + '/client/dist'));

const port = process.env.PORT || 5000;
app.listen(port, () => {
  console.log('Listening on port ' + port);
});

根 package.json 有以下脚本：

"scripts": {
    "start": "node server.js",
    "heroku-postbuild": "cd client && npm install && npm run build",
 },

记得在根 package.json 中包含来自 vue 的 devDependencies。启动脚本将在 Heroku 中自动执行，heroku-postbuild 将在 Heroku 安装根文件的依赖项后执行。在这种情况下，它将去客户端并安装客户端的依赖项并构建 dist 文件夹。

我在使用这种方法时遇到的一个问题是，即使在本地工作时，heroku 也无法找到 express 模块。为了解决这个问题，我需要在根 package.json 中表达从 devDependencies 到依赖项。有关此问题的更多信息here（缺少模块部分）。

可以在here 和here 找到更多有用的链接来实现我的方法。

【讨论】：