如何将导入的gem中的vue组件加载到rails中的lib目录？

Posted 2023-02-23

【中文标题】如何将导入的gem中的vue组件加载到rails中的lib目录？

【英文标题】：How to load vue components from imported gem to the lib directory in rails?

【发布时间】：2020-06-01 07:13:15

【问题描述】：

我们正在使用 Ruby Webpacker 将 javascript 加载到网页中。 目前我们在 webpacker.yml 中设置了如下路径

  source_path: app/javascript
  source_entry_path: packs
  public_output_path: packs

这可以正常工作并从给定路径加载所有资产。

问题： 在我的应用程序中，我们尝试从第三方库 lib/ 目录中加载资产，该目录包含如下文件夹结构所示的 javascript 文件。

如何将资源 (file1.vue) 从 lib 目录加载到包中。

供参考

这是我们目前的文件夹结构：

-root
 |
 |-app
   |-javascript
     |-packs
       |-[pack files]
 |-lib
   |- app1
      |-app
        |-javascript
          |- shared
            |- components
              |- fields
                |- file1.vue

file1.vue，在 chrome 浏览器的源选项卡下检查资产时，此文件不会加载。

fields文件夹下看不到文件内容

Webpack 文件夹结构

【参考方案1】：

安装导入的 gem 包并在其中启动 webpack 后，它就可以工作了。

gem update --system

bundle install

run webpack-dev-server