Tag Archives: View.js

[Solved] Error: this may cause an update error. (“prov”, value)

Duplicate keys detected: ‘Jiaozuo City’. This may cause an update error.
if you see this error message, it indicates that the key value of the V-for instruction is repeated,

Just modify your key value so that it will not be repeated.

After modification, it is like this

When the address is selected as other, such an error will be reported. After looking at the area.js region, the structure of other regions is different from that of other regions, and it will be changed to the same structure. (seems to be)

‘value’ is expected to be string number, But the result is array

Console.log the current error code location   Find out which are arrays, and then look in the code to see where the problem is

If you comment on this line of code, you will not report an error!

After change

Vue wran name Error: Unkown custom element [How to Solve]

[Vue warn]: Unknown custom element: – did you register the component correctly? For recursive components, make sure to provide the “name” option.

The Vue project uses ant design. After introducing the spacing space, the name always reports an error. Adding name and modifying name are useless.

Duplicate component names or repeated import. Finally, after searching the configuration file, it is found that it is imported on-demand, and sapce of ant is not introduced. After the introduction, the error report can be solved.

const MyPlugin = {}
import bus from '@cg/bus'
import {
  Result,
  Button,
  Space,
} from 'ant-design-vue'

MyPlugin.install = function (Vue, options) {
  // To reduce the size of the dist, try to do on-demand loading
  Vue.use(Button)
  Vue.use(Form)
  Vue.use(Result)
  Vue.use(Space)
  Vue.use(FormModel)

export default MyPlugin

If there is anything wrong, please correct it and exchange technology together.

Error: input is invalid type [How to Solve]

This error message is because MD5 encryption is used, but the MD5 encrypted data is not found to be undefined

curObj.creditCode ?curObj.creditCode : md5(curObj.registerNo))

If curobj.registerno here is undefined, an error will be reported.

When you see this error, print it on the console.

Vue Dynamic Display Picture Error 404: Not Found [How to Solve] 

<img :src="image"/>

When we dynamically load pictures, an error will appear as shown in the following figure

1. The first possibility is that you write a relative path, and you need to write an absolute path

image:'../assets/image/top10-1.png'
You need to change to the specific path
image:'/src/assets/images/top10-1.png'

2. The second solution is to use require ()

<img :src="require(images)"/>

3. The third solution is to put the pictures under the public directory, but although this solves the problem, the files in this directory will not be packaged when using webpack
4. If you use ts, you cannot use require (). You can use import to import your picture path as a module

<template>
	<img :src="images"/>
</template>
<script>
	import image from '../assets/image/top10-1.png'
	export default{
		data(){
			return {
				images:image
			}
		}
	}
</script>

[Solved] Vue E-Charts Error: These dependencies were not found:

Error reporting background

At present, I am working on a single page project of Vue. I temporarily replaced the system disk because I started a new project, which is actually a very easy reason to think of. However, the error “pointing to a component can not be found” on the console page at that time. In my mind, I first thought that there was a problem with my own partial introduction. After checking many introduction methods, I found that it did not seem to be the problem, Later, the reaction may be that the original things were moved because the disk was changed, and the dependencies are not in the current project directory. Although the version number of eckards is registered in package.json, the things are not detected by moudule, so naturally they can’t be retrieved.

Solution:

There is no problem running my code in the original environment, so the solution is very simple. Just download the required ecarts package and run the following command

// echarts download code
cnpm install [email protected] --save
//the reaseon for limiting version number:default 5 dont conatin Map components

Of course, because I changed the disk, I didn’t even have NPM, not to mention cnpm, not even inode… Of course, if you encounter these problems, just download the corresponding version you need
after downloading the dependencies, you can first go to package.json or the dependency file corresponding to your own project to check whether it is registered correctly, and then check whether the module has a corresponding package to develop a good development habit

result

After NPM running again, the IDE screen is displayed normally and the web page is displayed normally, OK.
(the picture will not be displayed here, otherwise the information security will be leaked.)

Vue3 + vite install element-plus error [How to Solve]

Vue3 + vite installation element plus error resolution

1. The console reports an error when running the project

Solution:
1 delete the node_Modules folder and package-lock.json
2 modify package.json
3 modify Vue version number must be above 3.2.2

4 reinstall I, but add – force to force installation, otherwise an error will be reported

 npm i --force

Element plus could not find the problem in index.css

In main.js

Solution:

The solution is also very simple. Now that you have installed the element plus dependency, you can’t find the file. The probability is that the path has changed. So I manually turned to node modules and found that the whole theme chat folder was moved

[Solved] ESLint error: Newline required at end of file but not found (eol-last)

When verifying Vue projects with eslint, the following warnings were found:

error: Newline required at end of file but not found (eol-last)

The results are as follows:

I found that the online solution is to insert a blank line after the warning code. I think this is very bad.

[solution]
1. Insert a configuration file .Editorconfig , in the project_final_Newline = true is changed to false

2. Cancel the verification of the last rule in . Eslintrc. JS

recompile without warning.

[Solved] Vue Use gzip Package Error: Rule can only have one resource source

How to configure:

NPM I compression webpack plugin - d install the plug-in and add the following configuration in Vue.Config.JS (the compression plugin configuration options depend on your personal needs)

configureWebpack: {
	plugins: [
		new CompressionPlugin({
			test: /\.(js|css)?$/i, // Which files to compress
                        algorithm:'gzip',　// Use gzip compression
		})
	]
}

Problems:
usegzip to unzip the Vue project report an error:Error: Rule can only have one resource source (provided resource and test + include + exclude).
Cause Analysis:
Webpack version conflict in package.json

Solution:
npm i [email protected] -D
npm i [email protected] [email protected] -D

Error: Duplicate plugin/preset detected [How to Solve]

Reason: element UI in .Babel is repeated

Solution: remove duplicate code in babel.config.js

Before modification

module.exports = {
  "presets": [
    "@vue/cli-plugin-babel/preset"
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

After modification

module.exports = {
  "presets": [
    "@vue/cli-plugin-babel/preset"
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}