是什么阻止了这个 rails/vue 项目部署到 heroku？

如何解决是什么阻止了这个 rails/vue 项目部署到 heroku？

我正在开发一个尚未解耦的 rails/vue 应用程序，我正在尝试将其部署到 heroku，但是当 heroku 尝试编译它时，它一直失败。它在本地运行良好。我得到的错误是：

远程：编译失败：远程：ModuleNotFoundError：找不到模块：错误：无法解析“/tmp/build_f1193978/app/javascript/packs”中的“./material-design-icons-iconfont/dist/material-design-icons.css”>

远程：在“/tmp/build_f1193978/app/javascript/packs”中解析“./material-design-icons-iconfont/dist/material-design-icons.css” 远程：使用描述文件：/tmp/build_f1193978/package.json（相对路径：./app/javascript/packs）远程：字段“浏览器”不包含有效的别名配置远程：使用描述文件：/tmp/build_f1193978/package.json（相对路径：./app/javascript/packs/material-design-icons-iconfont/dist/material-design-icons.css）远程：无扩展远程：字段“浏览器”不包含有效的别名配置远程：/tmp/build_f1193978/app/javascript/packs/material-design-icons-iconfont/dist/material-design-icons.css 不存在远程：.vue

在做了一些研究之后，我发现了一个看起来像 promising 的答案，但我不确定如何在我的 rails 项目中使用它，因为我不知道他们的答案应该应用在哪里。我在应用程序的 vue 部分的 main.js 中像这样导入它：

从'vue'导入Vue 从 'vuetify' 导入 Vuetify 从 'vue-router' 导入 VueRouter 导入'vuetify/dist/vuetify.min.css' 从'../app.vue'导入应用程序从 'axios' 导入 Axios 从 'vue-axios' 导入 VueAxios 从 'vuex' 导入 Vuex

import '@mdi/font/css/materialdesignicons.css' // 确保你使用的是 css-loader 导入'./material-design-icons-iconfont/dist/material-design-icons.css'

我尝试将模块包含在依赖项中，而不仅仅是 devdependencies，我还让 heroku 跳过了对所述 devdependecies 的修剪，但两种解决方案都没有奏效。基于此，我对问题的理解是，由于相对路径，heroku 找不到模块，但是我该如何规避呢？有没有一种简单的方法可以将这个特定的导入切换到绝对路径而不影响其他导入，而在那里，为什么这不会影响其他导入

解决方法

根据此处的相对路径判断：./material-design-icons-iconfont/dist/material-design-icons.css 您正在使用该文件的下载包，我怀疑它是否已提交到您的存储库。

如果您想使用 material-design-icons-iconfont，您应该根据其文档进行操作：

npm install material-design-icons-iconfont --save - 在您的项目目录中

然后在您的 stylesheets 文件夹中创建一个名为 app/javascript 的文件夹，并在其中添加一个名为 application.scss 的文件。

在此文件中添加以下几行：

$material-design-icons-font-directory-path: '~material-design-icons-iconfont/dist/fonts/';
 
@import '~material-design-icons-iconfont/src/material-design-icons';

我还鼓励您阅读 Getting Started on Heroku with Rails 6.x 以更好地了解该平台以及它如何与 Rails 交互。