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)

       > 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`

Answer 1

在上半年，您表现出色：package.json#build精确说明了要在Heroku的远程环境上构建的脚本。

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

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

Answer 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中找到实现我的方法的更多有用链接。

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

3 个答案: