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

Posted 2023-02-19

【中文标题】是啥阻止了这个 rails/vue 项目部署到 heroku？

【英文标题】：What is preventing this rails/vue project from deploying to heroku?是什么阻止了这个 rails/vue 项目部署到 heroku？

【发布时间】：2021-04-16 20:47:41

【问题描述】：

我正在开发一个尚未解耦的 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找不到模块，因为相对路径，但是我该如何规避呢？有没有一种简单的方法可以将这个特定的导入切换到绝对路径而不影响其他导入，而在哪里，为什么这不会影响其他导入

【参考方案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 交互。

【讨论】：

耶！很高兴它做到了！

说，你能不能帮我解决这个问题？ ***.com/questions/65708053/… 相似之处在于没有导入某些内容，但我相信它源于代码中的另一个问题。