如何在Shopware前端JS文件中访问应用（非插件）配置？

方法一：全局变量注入（最简单直接） #

1. 在Twig模板中暴露配置
   在应用的Storefront模板文件（比如Resources/app/storefront/src/Resources/views/storefront/base.html.twig）中，将配置注入到全局window对象：

   {% block base_script %}
       {{ parent() }}
       <script>
           window.myAppConfig = {{ config('myApp.config')|json_encode() }};
       </script>
   {% endblock %}
   

2. 在JS文件中访问
   直接在Resources/app/storefront/src下的JS文件中读取全局变量：

   // 获取整个配置对象
   const appConfig = window.myAppConfig;
   // 获取具体配置项
   const apiUrl = appConfig.apiUrl;
   

方法二：Shopware状态管理（规范方式） #

如果想遵循Shopware的前端架构规范，可以用状态管理来存储配置：

1. 注册自定义状态仓库
   创建Resources/app/storefront/src/store/myApp.store.js文件，定义状态仓库：

   const MyAppStore = () => ({
       state: {
           appConfig: {}
       },
       mutations: {
           setAppConfig(state, config) {
               state.appConfig = config;
           }
       },
       getters: {
           getAppConfig(state) {
               return state.appConfig;
           }
       }
   });
   
   Shopware.State.registerStore('myApp', MyAppStore);
   

2. 在Twig中更新状态
   在模板中调用mutation注入配置：

   {% block base_script %}
       {{ parent() }}
       <script>
           Shopware.State.commit('myApp/setAppConfig', {{ config('myApp.config')|json_encode() }});
       </script>
   {% endblock %}
   

3. 在JS中获取配置
   通过getter读取配置：

   const appConfig = Shopware.State.getters['myApp/getAppConfig'];
   

注意事项 #

• 确保模板文件被正确加载（可通过Shopware的模板扩展机制或布局引用实现）
• 不要将敏感配置暴露到前端
• 修改配置后需执行bin/console cache:clear清除Shopware缓存

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