Resolved vue-devtool NPM run build report error

Problem 1.

Vue download the vue-devtool tool — the latest version is 5.3.4 at this time, download zip to it — and execute the command.

npm i
npm run build

2. Solve

1) Update nodejs

It is recommended that you install NVM (NodeJS version management tool) and download the latest LTS version (long-term support version). If the installation fails, refer to the documentation: NVM failed to install NodeJS to resolve the change Registry

 npm config set registry http://registry.npm.taobao.org/

2) Webpack installation failure problem

Webpack official documentationThere are marked: “… With the latest long-supported version of Node.js…” ;

Open/project root /packages/shell-chrome/package.json and copy the configuration in the red box to/project root /package.json. The terminal executes NPM I after the copy is completed



If you run into problems with installation failure, you can refer to another note from the editor:Install webpack webpack – cli

3) Other (template) issues

Other problems are template problems, there are many kinds of error, not a description and screenshots, directly say the solution: 1. Open the/project root /package.json directory and add the following configuration in the “devDependencies” field. , the terminal executes NPM I after the replication is completed

"devDependencies": { ... "@ vue/compiler - SFC" : "^ 3.0.8", "CSS - loader" : "^ 4.3.0", "file - loader" : "^ 6.1.0", "postcss - loader" : "^ 3.0.0 style -", "resources - the loader" : "^ 1.2.1", "stylus" : "^ 0.54.7", "stylus - loader" : "^ 3.0.1", "url - loader" : "^ 4.1.0 vue -", "loader" : "^ 15.7.1", "vue - style - loader" : "^ 4.1.0", "vue - the template - the compiler" : "^ 2.6.10", "buble" : "^ 0.19.0 buble -", "loader" : "^ 0.5.1"}

2. Open/project root /packages/shell-chrome/package.json



Found that there are four plug-ins, using the NPM command failed to install because remote does not exist; What did the packages look like? What did the packages look like? !



Create a new folder in the project root /node_modules and name it :@vue-devtools, and copy the four files into the new folder



When the copy is complete, look at the package.json file in the four folders. After deleting each other’s code in “Dependencies” field, go to their respective directories and execute NPM I, as shown in the following example (do the same for other files) :

  1. After the above operation is complete, NPM run build to get the result:

    3. Complete the Chrome extension

    1. Open your Chrome browser and find more tools – the > extension



    2. Manually load the unzipped extension, noting that the directory is project root /packages/shell-chrome





    3. Installation successful!