Tag Archives: View.js

[Chrome]: DevTools failed to load source map… (How to Solve)

In the vue project, it is clear that the prompt information output on the console has been turned off through the following configuration, but it will still be printed?

Vue.config.productionTip = false

Vue.config.devtools= false

Vue.config.debug= false

1. Problem Analysis:

This is because after a vue project is packaged, the Javascript source code is usually merged and shrunk to optimize the site to load faster and reduce bandwidth usage. The compressed script is a file mapped from the transformed source to the original source, which allows the browser to reconstruct the original source and display the reconstructed original source to the debugger. In turn, to enable the debugger to use the source mapping, a source mapping file is generated and included in the converted file as a comment pointing to the source mapping file, as follows:

//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map

And when our vue project index.html or other entry interfaces to load some scripts into the project and packaged, these scripts will not produce the corresponding source mapping, but the mapping file (sourceMappingURL) is declared in the script, at this time the browser naturally throws an exception, so the console prints not the output of the project itself, but Chrome’s prompt!

2. Solution:

We just need to remove the above mentioned //# sourceMappingURL= xxxxxxx line from the corresponding statically introduced script, or download the corresponding source mapping file and place it in the directory where the corresponding script is located, depending on the boot version.

[Solved] Vue Error: error:0308010C:digital envelope routines::unsupported

Vue error: 0308010C: digital envelope routes:: unsupported

This error is due to the recent release of OpenSSL 3.0 in node.js V17, which adds strict restrictions on allowed algorithms and key sizes, which may have some impact on the ecosystem.

Solution:

Method 1:

Open the terminal (press Jian win+R to pop up a window, enter cmd on the keyboard, and then press Enter) and paste these according to the instructions: (Not necessarily, I tried but it failed)

Linux & Mac OS (windows git bash)

export NODE_OPTIONS=--openssl-legacy-provider

Windows command prompt:

set NODE_OPTIONS=--openssl-legacy-provider

Method 2:

Try to uninstall Node.js 17+ and reinstall Node.js 16+, then restart
1. Install nvm management tools (first turn off 360 and other software, or a warning will pop up!)
1. Download the installation package from the official website: https://github.com/coreybutler/nvm-windows/releases, download: nvm-setup.exe
2. Start the nvm installation.
(1) double-click the nvm-setup.exe file, select “I accept …” that line, click next

(2) you can customize the path disk according to their own situation, the path does not appear spaces or no-English symbols (the path is best in the root directory of the path disk, such as C disk, D disk under the root directory), click next after the selection

(3) Select the installation location of node.js, you can customize the path disk according to your own situation, the path does not appear spaces or Chinese symbols (the path is best to create a new folder in the root directory of the path disk, such as the root directory under the C disk, D disk), select it and click next. (If node.js is already installed in the system, then cmd open the terminal, type where node, check the location of node, and select this file directory)

(4) The last step, click install to complete the installation

3. Verify if the installation is successful
Enter the command and control line window (win+R, type cmd).
Type nvm -v, the version number appears that is successful.

4. Install node js

(1) Enter the command line nvm ls available to view the available nodes.js version.


(2) Enter the command line nvm install node version number (for example: nvm install 16.17.0)

(3) After the installation is successful, enter the command line nvm use node version number (nvm use 16.17.0)
If an errorexit status 1: Ȩ �� ִ � д˲ ; Enter cmd -> Run as administrator (command prompt) -> Re enter nvm use

(4) Verify whether the command line node – v and npm – v are successful Whether the installation of js and the corresponding npm is successful. If the version number can be displayed, the installation is successful.

Tip:
1. Enter the command line nvm ls to view all the Node.js version numbers you installed and the currently selected the running version of node.js

(2) If you want to delete a node For the js version, enter the command line nvm uninstall node version number (for example: nvm uninstall 18.10.0) to delete the corresponding version

2. Restart the application, no error is reported at 0308010C

npm run dev

error: Vue Project lang=“less“ Error [How to Solve]

Error reason:

The version of the less-loader is too high. Uninstall and reinstall version 7.0

1. Install the less-loader command: npm install — save dev less loader less

Solution:

1. Uninstall command: npm uninstall — save less loader

2 The command to install version 7.0: npm install – D [email protected]

After executing the above command, continue to check the less-loader and less versions in the package.json file, the less-loader version has been reduced to 7.X. Just re-run the project without errors. If the version has not changed after installation, you need to manually change the less-loader and less versions in the package.json file to version 7.0

vue-cli: Syntax Error: Thread Loader [How to Solve]

vue-cli: Syntax Error: Thread Loader

Syntax Error: Thread Loader(Worker 1)

Cannot read properties of undefined (reading 'options')

framework: @vue/cli@5 + [email protected] + ts

vue-cli uses wokrer-loader to load a web woker, using npm run build has a high chance of failing to package it with the error reported above.

There is a conflict between thread-loader and worker-loader.

Solution:

vue.config.js configure parallel: false . Build the official environment with thread-loader turned off.

[Solved] Failed to Create Vue Scaffold Error: spawn yarn ENOENT

Today, when I use yarn, it reports the error as the title.

Error reason:

The default package management is set to yarn, but yarn is not installed

Therefore, after uninstalling, you should:

1. Open the C drive, in the C drive, open the users folder, then search for the file named .vuerc on the right side.

2. Open the file, find the packageManager property, you can see that the default value you configured is yarn, change its value to npm.

If you need to install yarn, you can:

In the command line window, directly enter the commandnpm install yarnto installyarn.

[Solved] Vue-cli Create Project Error: ERROR command failed: yarn

Create a project through vue-cli, and the error ERROR command failed: yarn is reported

reason:

Installed yarn package manager When creating a vue project, you choose to use yarn package manager, but when creating a project through vue-cli, you use npm, causing a conflict

Solution:

The path to open the document is:C:\Users\Administrator\.vuerc

Note: If you don’t see it, check the hidden items at the top in Explorer
Open the folder and replace yarn with npm
Solve the problem and recreate the item

[Solved] 1:1 error Component name “Header“ should always be multi-word vue/multi-word

An error occurred while starting the vue project:

1:1 error Component name “Header” should always be multi-word vue/multi-word

The reason is that the nonstandard code (that is, nonstandard naming) is regarded as an error during the syntax check

Solution:

Add the configuration: lintOnSave: false in the vue.config.js file, as follows:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false
})

Error in nextTick: “TypeError: Cannot set properties of undefined (setting ‘checked‘)“

Error in nextTick: “TypeError: Cannot set properties of undefined (setting ‘checked‘)“

When you see nextTick, do you think of $nextTick?

This is exactly the kind of error that needs to be solved by using $nextTick

Vue performs asynchronously when updating the DOM. As soon as a data change is heard, Vue will open a queue and buffer all the data changes that occur in the same event loop, which means that a value assigned by vue will not take effect immediately, but will be updated when the next event is triggered. callback)

$nextTick is a delayed callback that is executed after the next DOM update loop. If you use $nextTick after modifying the data, you can get the updated DOM in the callback

[Solved] Error in event handler for “el.form.blur“: “RangeError: Maximum call stack size exceeded“

The following errors were encountered during form verification; This error will be reported when you lose focus or click to verify

If you look at the examples in the ElementUI document, you will find that they implement custom rules, setTimeout is used to limit the number of times the rules are called. In your case, once the field has a value (ergo, if is false), your else block will be executed again and again until it exceeds the maximum call stack size. You can solve this problem by restricting calls to custom rules

From: Javascript – understanding why element UI event handlers are triggering rangeerror: maximum call stack size exceeded- Stack Overflow

npm install error code EINTEGRITY sha1 [How to Solve]

npm install error code EINTEGRITY sha1

when other environment codes are packaged into another environment, the NPM install installation dependency reports an error. 

13023 error code EINTEGRITY
13024 error sha1-LgxPksfBBzrHtltHrDbWAuirTr8= integrity checksum failed when using sha1: wanted sha1-LgxPksfBBzrHtltHrDbWAuirTr8= but got sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA== sha1-stEE/g2Psnz54KHNqCYt04M8bKs=.

Solution:

rm -rf node_modules package-lock.json
npm cache clean --force
npm install --verbose