Как я могу изменить настройку загрузчика Vue в Laravel Mix?

#vue.js #webpack #laravel-mix #vue-loader #vue-apollo

#vue.js #webpack #laravel-mix #vue-loader #vue-apollo

Вопрос:

Кстати, используя Laravel Mix … и пытаясь использовать Vue Apollo, он говорит, что нам нужно добавить это в конфигурацию babel:

         {
            test: /.vue$/,
            use: [
                {
                    loader: 'vue-loader',
                    options: {
                        transpileOptions: {
                            transforms: {
                                dangerousTaggedTemplateString: true
                            }
                        }
                    }
                }
            ]
        },
  

но это выдает мне Failed to mount component: template or render function not defined. ошибку, для которой я не смог найти решение, за исключением потока где-то в Google, в котором говорится, что это потому, что я использую vue-loader дважды..

Итак, что я пытаюсь сделать сейчас, чтобы исправить эту ошибку, так это применить эту dangerousTaggedTemplateString настройку к существующей конфигурации webpack для файлов .vue.

Кто-нибудь знает, как это сделать?

Комментарии:

1. Вы используете Vue-CLI или raw webpack? Используете ли вы vue-cli-plugin-apollo? Где вы видите, что вы должны редактировать конфигурацию babel? Здесь говорится vue.config.js , и то только в том случае, если вы не используете vue-cli-plugin-apollo

2. Вообще не использовать vue-cli, и эта ссылка, на которую вы указываете, также говорит о том, что, когда вы не используете vue-cli, вам следует отредактировать исходную конфигурацию webpack. Я редактирую webpack.mix.js , изначально это выглядело так: mix.js (‘resources/js/app.js ‘, ‘public/js’).PostCSS(‘ресурсы/css/app.css’, ‘public/css’, [])

Ответ №1:

Попробуйте это (непроверенное), оставьте mix.js указанную вами строку нетронутой. Затем в новой строке:

 mix.options({
   vue: {
      transpileOptions: {
         transforms: {
            dangerousTaggedTemplateString: true
         }
      }
   }
});