Краткое изложение метода обновления проекта vue-cli3 до vue-cli4

Vue.js

Это моя предыдущая конфигурацияИнтерфейсный шаблон H5 на основе vue-cli3Обновление в основном обновляет проект vue-cli3 до vue-cli4 и удаляет некоторые устаревшие плагины. Версия плагина обновлена ​​до текущей (2020-03-19) самой высокой версии (было обновлено множество версий плагинов webpack), а после обновления добавляются новыеКонфигурация мультидоменного прокси, официальная документация по обновлениющелкни меня щелкни меня

При обновлении по официальной документации вы столкнетесь со многими ямами, 😂, вы можете использовать ее сразу после настройки.

Ключевые особенности включают

  1. расширение упаковки webpack
  2. css: поддержка sass, normalize.css, _mixin.scss, _variables.scss
  3. vw, рем макет
  4. Междоменные настройки мультидоменного прокси
  5. eslint + стандартные настройки
  6. Введение в общую библиотеку cdn
  7. Дизайн маршрутизации, перехват входа в систему
  8. аксиомы, дизайн API
  9. vuex управление состоянием

адрес проекта:vue-cli4-H5

адрес демо-упаковки:Чжоу Юпэн.GitHub.IO/2020-03-19/…

Ниже приведены шаги обновления и сводка.

1. Сначала установите последнюю версию Vue CLI глобально:

npm install -g @vue/cli
# OR
yarn global add @vue/cli

Проверьте установленную версию cli

vue -V  # 输出:@vue/cli 4.x.x  说明@vue/cli 4安装成功( vue cli 3的版本会输出 3.x.x )

После того, как я установил его, я проверил, что это всегда была версия 3.X, поэтому я удалил vue/cli и установил новый.

2. Выполнить в корневом каталоге проекта

vue upgrade
Следуйте инструкциям по обновлению

Ошибка и решение

WARN "css.modules" option in vue.config.js is deprecated now, please use "css.requireModuleExtension" instead.

После обновления css-loader до v3 используйте css.requireModuleExtension вместо css.modules

css.loaderOptions глобально вводит переменные и ошибки примесей

Перед sass-loader v7 используйте data: ' ', затем используйте prependData: ' ', prependData: '@import "style/_mixin.scss"'; заменить предыдущий данные: '@import "style/_mixin.scss"';

После обновления ESLint, поскольку Prettier не сообщает о стандарте, Четыре дополнительных плагина, которые будут установлены после обновления

npm install eslint-plugin-import --save-dev
npm install eslint-plugin-node --save-dev
npm install eslint-plugin-promise --save-dev
npm install eslint-plugin-standard --save-dev

Удалить этоuglifyjs-webpack-pluginПлагины, которые были официально удалены, используют конфигурацию консоли, поставляемую с webpack4.x.

Затем измените ошибку, вызванную узлом во время процесса обновления, и обновление будет завершено ~

Категории