时间戳

首页 > 解决方案 > 部署到 Heroku 时 Webpack 别名不起作用

node.js - 部署到 Heroku 时 Webpack 别名不起作用

问题描述

我为我公司正在开发的一个库设置了一个小型演示应用程序。我们将 Vue CLI 与 webpack 和 node 一起使用。我已经成功地使用他们的 git 部署设置将它部署到 Heroku。

最近我发现需要在构建之后生成一个翻译文件。我使用一个节点命令并触发一个小脚本，该脚本编译一个包含渲染应用程序所需的所有属性的数组。该文件存储在一个名为/dist. 然后我为应用程序的根目录设置了一个别名，以便在我们在 webpack 处理的文件中时能够找到属性文件。

我的vue.config.js样子是这样的：

const path = require('path');
const ROOT = path.resolve(__dirname, '.');

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@root': ROOT,
        '@dist': path.resolve(ROOT, '/dist')
      }
    },
    devServer: { ... }
  }
};

在我的./src/translationLoader.js我有以下几行来导入生成的文件：

import translations from '@dist/properties/translations-require.js';

// ...

AJS.I18n.keys = translations.en_UK;

在本地一切正常，但是当我部署到 Heroku 时，我收到以下错误消息：

remote:        > vue-cli-service build ./src/main
remote:
remote:
remote: -  Building for production...
remote:         ERROR  Failed to compile with 1 errors7:09:01 AM
remote:
remote:        This dependency was not found:
remote:
remote:        * @dist/properties/translations-require.js in ./src/translation-loader.js
remote:
remote:        To install it, you can run: npm install --save @/../dist/properties/translations-require.js
remote:  ERROR  Build failed with errors.
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! @refinedwiki/core-ui-docs@1.0.75 build: `vue-cli-service build ./src/main`
remote: npm ERR! Exit status 1

我已经通过使用他们的 bash 工具登录到 Heroku 在文件结构中找到它来验证该文件是正确生成的。关于我可以遗漏的任何想法？

作为参考，这里是package.json项目的：

{
  "name": "ui-docs",
  "engines": {
    "node": "14.15.x",
    "npm": "6.14.x"
  },
  "scripts": {
    "serve": "node i18nParser.js && vue-cli-service serve ./src/main --port 8100",
    "build": "vue-cli-service build ./src/main",
    "heroku-postbuild": "scripts/build-heroku.sh",
    "pipelines-setup": "scripts/setup-pipelines.sh",
    "pipelines-build": "scripts/build-pipelines.sh",
    "pipelines-merge-master": "node_modules/.bin/merge-master",
    "pipelines-config": "node_modules/.bin/config-setup",
    "start": "node server.js",
    "deploy": "node_modules/.bin/deploy-core",
    "deploy-heroku": "scripts/deploy-heroku.sh"
  },
  "repository": "bitbucket:refinedwikiteam/core-ui-docs",
  "license": "UNLICENSED",
  "dependencies": {
    "connect-history-api-fallback": "^1.6.0",
    "express": "^4.16.4",
    "fs-extra": "^9.0.1",
    "properties-reader": "^2.1.1",
    "serve-favicon": "^2.5.0",
    "serve-static": "^1.13.2",
    "vue": "^2.6.12",
    "vue-router": "^3.4.3",
    "webpack": "~4.41.6"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.4.0",
    "@vue/cli-service": "^3.4.0",
    "eslint-plugin-vue": "~6.0.1",
    "node-sass": "^4.14.1",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.5.21"
  }
}

标签： node.jsvue.jsherokuwebpack

解决方案

我遇到了一个非常相似的问题，终于弄清楚了。所以我会在这里发布我的解决方案（即使不完全相同），以防万一它对某人有用。

问题不在于您的别名配置，问题在于 heroku 没有将 /dist 文件夹复制到它用于构建应用程序的临时目录中。因此，当它尝试构建它时，它找不到它并失败。为了实现这一点，我必须制作我自己的 buildpack。

就我而言，我的文件夹结构如下：

electron_app/
 src/
web_app/
  src/
common_src/
  myfile.js
  ..etc

因此，为了在 heroku 中构建 web_app，并使用 common_src 文件夹的源代码，我们需要使用以下 buildpack：

  1. 将 buildpack 添加到 heroku
heroku buildpacks:add --index 1 https://github.com/GMolini/heroku-buildpack-subdir-to-root-extra-dirs.git --app <YOUR_APP>
  1. 告诉 buildpack 应用程序 heroku 需要构建的主要来源在哪里
heroku config:set PROJECT_RELATIVE_PATH=web_app --app <YOUR_APP>
  1. 告诉 buildpack 将您的应用需要的任何额外目录复制到构建目录
heroku config:set EXTRA_DIR_0=common_src --app <YOUR_APP>
heroku config:set EXTRA_DIR_1=another_needed_folder --app <YOUR_APP>
  1. 最后，修改 webpack 配置，以便别名在开发和生产中的正确文件夹中查找源（在 heroku 中，该文件夹将与您的 src 文件处于同一级别）
  
const path = require('path');

let common_src_path = process.env.NODE_ENV === 'development' ? path.resolve(__dirname, '..', 'src_common') : path.resolve(__dirname, 'src_common');

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        "@common_src": common_src_path,
      },
      extensions: ['.js', '.vue']
    },
    devtool: 'source-map'
  },
}

就是这样，如果你推送到heroku，构建应该会找到必要的文件。

推荐阅读