Блог

Главная - Вопросы по программированию - Vue.js 3 прерывания расширения при использовании «сборки vue-cli-service» из-за небезопасной оценки

Vue.js 3 прерывания расширения при использовании «сборки vue-cli-service» из-за небезопасной оценки

#vue.js #webpack #google-chrome-extension #vue-cli #vuejs3

#vue.js #webpack #google-chrome-extension #vue-cli #vuejs3

Вопрос:

Я разрабатываю расширение Chrome с использованием vue 3, vue-router и vuex на основе проекта Kocal, который использует vue-cli under the hood. Я использовал, когда это было возможно, однофайловые компоненты с широким использованием привязок vue. В режиме разработки все работает идеально, но недавно я попытался создать приложение для производства, и я столкнулся с этой ошибкой при частичном рендеринге:

 chunk-vendors.f6de00a6.js:11 EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".

Насколько я понимаю, после нескольких дней копания либо система компиляции webpack, либо vue возится с CSP, ссылаясь / вводя код через сценарии eval. Поскольку я довольно новичок в этом, мне трудно читать, чтобы понять, что я могу сделать.

Я пробовал разные подходы:

  • определение $vue псевдонима для встроенной среды выполнения vue.config.js (предположительно удаление небезопасной оценки путем компиляции кода перед выполнением, но заканчивается новой ошибкой: Uncaught TypeError: Object(...) is not a function for o=Object(n["withScopeId"])("data-v-21ae70c6"); )
  • использование render() функции в корне
  • добавление "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'", в manifest.json
  • переключение компонента на render() , чтобы увидеть, есть ли у меня больше шансов при частичном рендеринге, но в итоге ничего не отображается, хотя есть консоль.журнал выполнения рендеринга.
  • Добавление конфигурации в разделяющий манифест chainWebpack и встроенный манифест в vue.config

Что меня озадачивает, так это то, что я не могу избавиться от unsafe-eval , в лучшем случае, частичного отображения, в худшем случае пустой страницы. Привязки, похоже, отключаются независимо от того, и использование router-link для смены страницы даст пустую страницу.

Редактировать: после изучения скомпилированного кода из webpack и установки значения minimize opt на false кажется, что ошибка исходит от поставщика: vue-i18n

Ответ №1:

eval Вероятно, это происходит из Webpack из-за проблемы с глобальным охватом.
более подробную информацию см. По ссылке https://mathiasbynens.be/notes/globalthis

Не могли бы вы попробовать добавить эту конфигурацию в vue.config.js 

 module.exports = {
  configureWebpack: {
    node: {
      global: false
    },
    plugins: [
      new webpack.DefinePlugin({
        global: "window"
      })
    ]
  }
};

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

1. Спасибо за предложение. Я где-то видел конфигурацию node: false, но не пробовал. Я добавил то, что вы предлагаете, в мой vue.config.js , но у меня та же проблема сохраняется (частичный рендеринг с ошибками оценки)

2. Я снова и снова тестировал и тестировал, и тот факт, что у меня есть хотя бы частичный рендеринг, похоже, указывает на то, что webpack выполняет хотя бы часть компиляции правильно. Если бы я должен был изменить vue $ alias на сборку только для среды выполнения, у меня действительно был полностью пустой экран. Я думаю, что проблема может быть где-то в другом месте.

3. 🤔если Vue только для среды выполнения вызывает пробел, это, по-видимому, указывает на то, что шаблон не компилируется, но из репозитория не вижу причины, по которой это могло бы произойти.

4. Это нормально, vue-cli использует webpack для предварительной компиляции .vue, и я предоставлял ему только время выполнения vue.js для этой предварительной компиляции. Это может дать немного, но по крайней мере часть файлов .vue скомпилирована.

Ответ №2:

tl; dr: проверьте свои зависимости / пакеты, включая те, которые, по вашему мнению, они не используют unsafe-eval .

После изучения внутренних компонентов и компонентов webpack для vue3, вот выводы:

  • использование однофайловых компонентов и конфигурации vue-cli по умолчанию в порядке, поскольку для этого действительно потребуется просто среда выполнения vue, поэтому незапрашиваемых unsafe-eval
  • работает конфигурация webpack, как показано ниже:
   module.exports = {
    configureWebpack: {
      plugins: [
        new webpack.DefinePlugin({
          global: "window" // Placeholder for global used in any node_modules
        })
      ]
    },
    ...
  };
// Note that this plugin definition would break if you are using "unit-mocha" module for vue-cli

В конце концов, проблема заключалась в зависимости, которую я использовал для i18n vue-i18n@next , после ее удаления и переключения на способ chrome i18n, теперь он работает.