Tag Archives: Problems encountered in Vue

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"
      }
    ]
  ]
}

VUE Error: Mixed spaces and tabs [How to Solve]

Error reporting reason:

Mixed spaces and tabs.

Eslint is used in the development process to standardize the code style. Eslint loader is used in webpack configuration. Eslint is a syntax checking tool. The disadvantage is that it is too strict with the written code. Most code conventions require the use of spaces or tabs for indentation. Therefore, if a line of code is mixed with tab indentation and space indentation at the same time, it is usually wrong. You need to delete the spaces where the error is reported before compiling.

Solution:

Add rules under eslintconfig in package.json

"rules": {
		"no-console": "off",
		"no-debugger": "off",
		"no-mixed-spaces-and-tabs": "off"
	}