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

Question

我正在开发一个尚未解耦的 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） 远程：字段 'browser' 不包含有效的别名配置 远程：使用描述文件：/tmp/build_f1193978/package.json（相对路径：./app/javascript/packs/material-design-icons-iconfont/dist/material-design-icons.css） 远程：无扩展名 远程：字段 'browser' 不包含有效的别名配置 远程：/tmp/build_f1193978/app/javascript/packs/material-design-icons-iconfont/dist/material-design-icons.css 不存在 远程：.vue

经过一些研究，我找到了一个看起来 的答案，但我不确定如何在我的 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 找不到模块，因为相对路径，但我该如何避免呢？有没有一种简单的方法可以将这个特定的导入切换到绝对路径而不影响其他导入，而在那里，为什么这不影响其他导入

Answer 1

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

如果你想使用material-design-icons-iconfont，你应该根据它的文档来做：

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

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

在此文件中添加这些行：

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

更多信息：https://www.npmjs.com/package/material-design-icons-iconfont

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