Tag Archives: View.js

[Solved] ERROR Error loading vue.config.js: ERROR Error: Command failed: git describe

Recently, a front-end and back-end separation project was implemented using git clone. A problem was encountered during the front-end startup. Node.js was used    The NPM run serve command and the yarn run serve command will report an error when starting the front-end project. You have tried to download the dependent node that has been installed_ The modules folder and the whole front-end project still reported this problem. Baidu found the error: command failed: git describe — always, and did not find the corresponding article

Later, I finally found the problem and reported the error because of the environment variable problem of GIT

First, this is the wrong git configuration, which leads to the error: command failed: git describe — always problem

The following is how to correctly configure environment variables. Add CMD after the original path

Then, create a new CMD and enter yarn run serve to run normally. The problem I encountered is solved in this way

[Solved] Vue2.0 Error: Syntax Error: TypeError: eslint.CLIEngine is not a constructor

Solution:
ERROR Failed to compile with 1 error
Syntax Error: TypeError: eslint.CLIEngine is not a constructor
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
Open package.json and delete the following code and re-run

Or change lintOnSave to false in the vue.config.js file

[Webpack Update] vue-loader Error: Compiled with problems : ERRORModule notfound: Error:Can‘ t resolve vue in

In the package.json package

 "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server --open",
        "bulid": "webpack -p"
    },

“bulid”: “webpack -p” – The P instruction can no longer be recognized and has been eliminated. Change to:

"scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server --open",
        "bulid": "webpack"
    },

CSS loader update

In the old version, CSS loader cannot recognize the URL address. In addition, URL loader is cumbersome, but it can automatically generate Base64 images to reduce the pressure on the server. The new version directly supports URL parsing, but obviously this function can also be configured:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          url: true,
        },
      },
    ],
  },
};

Disable the URL, but it seems that the CSS attribute and ID selector will not work after configuration;

Vue loader configuration encountered great obstacles

When using Vue loader, you must download Vue template compiler to parse Vue files

Configuration options:

const VueLoaderPlugin = require('vue-loader/lib/plugin');//Must Import
module.exports = {

     module: {
        rules: [
            { test: /\.vue/, use: ['vue-loader'] }
        ]
    },
    plugins: [new VueLoaderPlugin()]//Must configurate
}

But there was a problem after I configured it

All the methods on the Internet are invalid. Finally, it is found that Vue is not installed

npm i vue

There are also problems after installation, and the error is still reported

Finally, you can see that the version numbers of Vue template compiler and Vue are different, so they are updated   The problem was finally solved after Vue template compiler

[Solved] Vue Error: error ‘xxx‘ is defined but never used no-unused-vars

If there is an error, solve it: ‘action’ is defined but never used no unused vars

* * error reason: * * because the built Vue project selects the eslint verification specification -> The eslint specification is that you either don’t define a variable or you must use it if you define it

Solution:

Add the following code into the package.json file (restart the project after saving!!!)

"rules": {
    "generator-star-spacing": "off",
    "no-tabs":"off",
    "no-unused-vars":"off",
    "no-console":"off",
    "no-irregular-whitespace":"off",
    "no-debugger": "off"
}

Vue project startup error: cannot find module XXX

Cause: a module that the project depends on cannot be found

Solution:
1. delete the folder where modules are stored node_ module

2. Execute the clear cache command NPM cache clean
If an error is reported, use to force to clear NPM cache clean -- force
If an error is reported, delete the package-lock.json file;

3. Reinstall the module, NPM install ; (the package-lock.json file will be automatically regenerated)

Then restart NPM run dev.

[Solved] NPM Error: FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed

This error is reported when NPM run build is executed to package Vue project, because the maximum value of node file set is not enough and the file after project packaging is too large.

Solution: install increase memory limit globally

Command line CMD, DOS window running: cnpm install – G increase memory limit,

Enter the project folder and run: increase memory limit

If NPM run build reports an error ‘node — Max old space size = 10240’ after executing increase memory limit after entering the project file, it is neither an internal or external command nor a runnable program ‘

You can create the following JS file contents in the project root directory, execute the file with node, and then run NPM run build to package successfully. This is to replace the public function of the string in the file corresponding to the. Bin file under the node_mosules file.

// Execute this script via node the first time you run the project
const fs = require('fs')
const path = require('path')
const wfPath =  path.resolve(__dirname, './node_modules/.bin')

fs.readdir(wfPath, (err, files)=>{
   if (err) {
    console.log(err);
   } else {
      if(files.length != 0 ) {
        files.forEach((item)=>{
           if(item.split('.')[1] === 'cmd') {
              replaceStr(`${wfPath}/${item}`, /"%_prog%"/, '%_prog%')
           }
        })
     }
   }
 })

// Parameters: [file path, string to be modified, modified string] (public function to replace the string in the corresponding file)
function replaceStr(filePath, sourceRegx, targetSrt) {
  fs.readFile(filePath, (err, data)=>{
     if(err) {
     console.log(err)
     } else {
       let str = data.toString();
      str= str.replace(sourceRegx, targetSrt);
       fs.writeFile(filePath, str, (err)=> { console.log(err) })
     }
  })
}

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed

When NPM runs build, an error is reported: fatal error: ineffective mark compacts near heap limit allocation failed. Most of the answers are found on the Internet:
NPM install – G increase memory limit
enter the project directory and execute:
increase memory limit
this configuration is invalid. Then he said he wanted to put node_ Remove the double quotation marks in “XXX” under the modules folder (XXX forgot something). It’s also invalid
the last feasible solution:
open the CMD window and enter the command: setx node_ OPTIONS –max_ old_ space_ size=10240。 Then close the command window and rerun NPM run build. success!!!

How to Solve Vue route jump repeated clicks Error

The following error message appears
Solution:
Set the index.js under router as follows, and the problem is solved


The code is as follows.
// Repeated click on the route reports an error
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
const originalReplace = VueRouter.prototype.replace
VueRouter.prototype.replace = function replace (location) {
return originalReplace.call(this, location).catch(err => err)
}

[Solved] Vue Project Error: Arrow function should not return assignment

Vue item error arrow function should not return assignment

Problem source

Recently, there was an error arrow function should not return assignment

when creating a startup Vue project. In fact, there is more than one error, but the final reason is that the eslint check code is referenced.

Solution:

1. Modify the code to comply with the rules of eslint (this method does not take effect here)
add {} to the code after the arrow; however, it reports this error again (I don’t know how to solve this error up to now)

2. Remove eslint
and comment ‘standard’
in the. Eslintrc.js file under the project root directory

Webpack Upgrade Error: webpack.NamedModulesPlugin is not a constructor

Use [email protected] time: wrong type: webpack.namedmodulesplugin is not a constructor

Next, webpack.config.js:

const webpack = require('webpack');
const { merge } = require('webpack-merge');

const baseConfig = require('./webpack.config.base');

module.exports = merge(baseConfig, {
  mode: process.env.NODE_ENV,
  entry: {
    index: './app/index.ts',
  },
  plugins: [
    new webpack.NamedModulesPlugin(),
    new webpack.EnvironmentPlugin({
      NODE_ENV: 'development',
    }),
  ],
});

Cause of problem: in 5.0, namedmodules plugin has been removed

Refer to upgrading obsolete configuration items

NamedModulesPlugin → optimization.moduleIds: ‘named’

optimization: {
 moduleIds: 'named'
}

Modify configuration:

const webpack = require('webpack');
const { merge } = require('webpack-merge');

const baseConfig = require('./webpack.config.base');

module.exports = merge(baseConfig, {
  mode: process.env.NODE_ENV,
  entry: {
    index: './app/index.ts',
  },
  optimization: {
    moduleIds: 'named'
  },
  plugins: [
    new webpack.EnvironmentPlugin({
      NODE_ENV: 'development',
    }),
  ],
});

PS. moduleid it seems that the default value is named?Just remove namedmodules plugin.

[Solved] Error spawn CMD enoent errno when starting Vue project: – 4058

Question

When I set the Vue project to automatically jump to the browser after startup, the console reports the following errors:

DONE  Compiled successfully in 11178ms                                                                      下午3:42:04


  App running at:
  - Local:   http://localhost:8080/
  - Network: unavailable

  Note that the development build is not optimized.
  To create a production build, run npm run build.

events.js:292
      throw er; // Unhandled 'error' event
      ^

Error: spawn cmd ENOENT
    at Process.ChildProcess._handle.onexit (internal/child_process.js:269:19)
    at onErrorNT (internal/child_process.js:465:16)
    at processTicksAndRejections (internal/process/task_queues.js:80:21)
Emitted 'error' event on ChildProcess instance at:
    at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
    at onErrorNT (internal/child_process.js:465:16)
    at processTicksAndRejections (internal/process/task_queues.js:80:21) {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'spawn cmd',
  path: 'cmd',
  spawnargs: [ '/c', 'start', '""', '/b', 'http://localhost:8080/' ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     D:\node\node_cache\_logs\2020-12-19T07_42_04_693Z-debug.log

When I don’t set "serve": "Vue cli Service -- Open", it can run normally without any error. According to the error prompt spawn CMD enoent, we can know

spawn XXX enoent: indicates that the environment variable of the corresponding running program is missing. The reason for the error is that the computer lacks the environment variable of the CMD running program. I think the error is probably because to realize automatic jump, you need to enter a command in CMD and then the computer system calls the browser, but the computer lacks the environment variable of the CMD running program, so the error is reported (comments are welcome)

Solution:

Add C:\windows\system32 to the environment variable path

Right click my computer (this computer) – properties – advanced system settings (search) – Advanced – environment variables – system variables, find path and add it
after adding, close vscode and reopen the startup project