Vue cli2 upgrade Vue cli3 pit record

Time:2022-5-8

Project background

It was a project based on element admin three years ago. It was very good at the beginning. Although the project was started slowly, the compilation speed was not slow. Later, after a certain demand, the compilation speed was very slow,

Problems existing in the project

  • Slow starting speed
    Vue cli2 upgrade Vue cli3 pit record
  • Slow compilation speed
    Vue cli2 upgrade Vue cli3 pit record

    Original project dependency and file directory

    File directory

    Vue cli2 upgrade Vue cli3 pit record

    package.json

    dependencies

    Vue cli2 upgrade Vue cli3 pit record

    devDependencies

    Vue cli2 upgrade Vue cli3 pit record

After migrating to cli3, it feels good

  • Start project
    Vue cli2 upgrade Vue cli3 pit record
  • Compilation speed
    Vue cli2 upgrade Vue cli3 pit record

Start migration

  • Idea 1: build a Vue cli new project, and then copy the dependency (the result is half done, and there are too many pits, ha ha)
  • Train of thought 2

    1. Because the original project was based on three years agovue-admin-templateFor this project,
    2. I went to the official website and saw that he has upgraded to Vue cli3. I copied it and replaced it. It should be a little less than my idea 1, stepping on the pit,
    3. I feel that train of thought 1 can also be done. However, I didn’t bother to toss, so I took a shortcut

    Migration steps

    1. Static directory and index The HTML file should be copied to the public folder, and the static file path should be changed

    Vue cli2 upgrade Vue cli3 pit record
    Vue cli2 upgrade Vue cli3 pit record

    2. Modify package JSON dependency

    Dependencies dependency comparison

    Vue cli2 upgrade Vue cli3 pit record

    Devdependencies dependency comparison
    Vue template compiler should be the same as the version of Vue to avoid any strange problems,

    Vue cli2 upgrade Vue cli3 pit record

    Babel eslint should be degraded, otherwise an error will be reported: typeerror: cannot read property ‘range’ of null
    Cause of problem:https://segmentfault.com/a/11…

    Vue cli2 upgrade Vue cli3 pit record

    3. Replace eslint with that of the original project

    4. Modify the context and agent file and start the project

    There is a warning, the project did not report an error, happy

    Vue cli2 upgrade Vue cli3 pit record

    Critical dependency: the request of a dependency is an expression

    Vue cli2 upgrade Vue cli3 pit record
    Cause of problem:Webpack import dynamic loading of components
    Solution

  • Just change to require
    Vue cli2 upgrade Vue cli3 pit record
  • Just change to require
    Vue cli2 upgrade Vue cli3 pit record

    const   load = view => () => import(@/views/callManage/${view}) 
     become 
    const   load = (view) => (resolve) => require([@/views/callManage${view}], resolve)
    Modify the publicpath. If the deployment environment is multi project, you need to

    Vue cli2 upgrade Vue cli3 pit record

Because the current architecture is to migrate node SaaS into dart SaaS, we need to deal with some syntax incompatibility. In fact, it is a syntax incompatibility, which is easy to solve. Replace it globally

Official website description
Vue cli2 upgrade Vue cli3 pit record

Module parse failed: Unexpected token

Problem description, error reporting, saying that there was a problem with the element UI package, looking confused and forced, GitHub went through a wave

Error reporting information

Vue cli2 upgrade Vue cli3 pit record

Extended problem

  • Why is it so slow to return after a certain demand, and the documents added in that demand are not available?
  • Still unfamiliar with webpack, ha ha

Concluding remarks

  • If there are any mistakes in this article, please correct them. Thank you very much
  • Old iron who thinks it’s useful, double click it, and little red heart will walk
  • Welcome to irrigation, come on, hurt each other ha o (∩∩) O ha ha

reference material