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

Question

我正在学习将我的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)

       > [email protected] postinstall /tmp/build_d350166995249e94786090e39036fa51
       > npm install --prefix server && npm install --prefix client


       > [email protected] 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

       > [email protected] build /tmp/build_d350166995249e94786090e39036fa51
       > cd client && npm run build


       > [email protected] 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! [email protected] build: `vue-cli-service build`

Answer 1

在上半场你做得很好：package.json#build准备好运行脚本，以便在Heroku的远程环境中构建。

问题是，在这种环境中，您的全局软件包（通过npm install -g <package-name>安装的软件包不可用！vue-cli-service就是这种情况，必须包含在package.json#devDependencies中，或者只需在本地存储库中运行npm install --save-dev vue-cli-service并再次部署。

Answer 2

我找到了解决方案。 Heroku将忽略devDependencies中的包。我被关掉heroku config:set NPM_CONFIG_PRODUCTION=false YARN_PRODUCTION=false和Heroku工作得很好。

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