This is the upgrade of the front-end H5 template built based on Vue-CLI3 that I configured before, mainly upgrading vue-CLI3 project to Vue-cli4, and deleting some outdated plug-ins. Plugin version upgrade to the current (2020-03-19) the highest version (upgrade a lot of WebPack plugin version), after the upgrade, add more domain name proxy configuration, official upgrade document click me click me

According to the official document upgrade will also encounter a lot of pits, 😂, configuration can be used directly.

Key functions include

  1. Webpack packages extensions
  2. CSS: SASS support, normalize. CSS, _mixin. SCSS, _variables
  3. Vw and REM layout
  4. Multi-domain proxy cross-domain Settings
  5. Eslint + Standard setting
  6. Introduction of common library CDN
  7. Route design and login interception
  8. Axios, API design
  9. Vuex state management

Project address: Vue-CLI4-H5

The demo package address: zhouyupeng. Making. IO / 2020-03-19 /…

Here are the upgrade steps and a summary

Install the latest Vue CLI globally:

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

Check the CLI version after installation

vue -V  @vue/cli 4.x.x indicates that @vue/cli 4 is installed successfully (vue CLI 3 version will output 3.x.x).
Copy the code

I have been installed after the view is 3.X version first uninstall vue/ CLI to install new

Execute in the project root directory

vue upgrade
Copy the code
Upgrade as prompted

Error report and solution

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

CSS – loader upgrade v3 after using CSS. RequireModuleExtension instead of CSS. The modules

Sass-loader v7 uses data: ‘ ‘, prependData: ‘ ‘, prependData: ‘ ‘@import “style/_mixin.scss”‘; Replace previous data: ‘@import “style/_mixin.scss”‘;

After upgrade ESLint because use standard not Prettier to fault, after upgrading to install four other plug-ins

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
Copy the code

Delete the officially obsolete uglifyjs-webpack-plugin and use webPack4. x’s built-in console configuration

The upgrade is complete by correcting node errors during the upgrade