Rails 5项目index.html.erb引入本地cookieconsent资源找不到如何解决？

核心原因 #

你填写的app/assets/javascripts/xxx是源码存放路径，不是浏览器可访问的公开路径。Rails Asset Pipeline会对静态资源做编译、添加指纹哈希，不能直接用源码路径引入。

步骤1：确认文件存放位置 #

你当前的存放路径是正确的，不需要调整：

• JS文件：app/assets/javascripts/cookieconsent.js
• CSS文件：app/assets/stylesheets/cookieconsent.css

步骤2：添加资源到预编译列表 #

打开config/initializers/assets.rb，添加如下配置，让Rails预编译这两个独立文件：

Rails.application.config.assets.precompile += %w( cookieconsent.js cookieconsent.css )

修改完成后重启Rails服务生效。

步骤3：修改erb中的引入代码 #

在index.html.erb中，用Rails提供的asset_path辅助方法生成正确的资源访问路径，修改后的完整代码如下：

<script src="<%= asset_path 'cookieconsent.js' %>"></script>
<script>
    var cookieconsent = initCookieConsent();

    cookieconsent.run({
        current_lang : 'en',
        theme_css : '<%= asset_path 'cookieconsent.css' %>',

        languages : {
            en : {
                consent_modal : {
                    title :  "I use cookies",

                    primary_btn: {
                        text: 'Accept',
                        role: 'accept_all'  //'accept_selected' or 'accept_all'
                    },
                    secondary_btn: {
                        text : 'Reject',
                        role : 'accept_necessary'   //'settings' or 'accept_necessary'
                    }
                }
            }
        }
    });
</script>

补充说明 #

• 开发环境下修改完直接刷新页面即可验证，右键查看页面源码，资源路径应为/assets/cookieconsent-xxx.js格式（xxx是自动生成的哈希值）
• 生产环境部署前需要执行rails assets:precompile完成资源预编译
• 如果你项目使用了webpacker替代默认的Asset Pipeline，可将JS文件放在app/javascript/packs目录下，用javascript_pack_tag 'cookieconsent'引入即可

内容的提问来源于stack exchange，提问作者sara lance