Tag Archives: I saw it. JS Company

After Vue is packaged to the server, the static resource path reports an error

The error reporting path is:
http: domain name/CSS/XX css

In fact, it should be:
http: domain name/dist/CSS/XX/CSS

Method:
ensure that the value of publicpath is: publicpath: ‘. /’

ps:config.js or Vue-config.js file, according to the actual situation, if the editor cannot be found, search publicpath globally

Vue Project Error: Error from chokidar [How to Solve]

The temporary solution is to enter the following command at the terminal, but this temporary change will not work after restarting the system.

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

The reason for this is that the number of monitoring handles set by the Linux system is not enough, so you need to modify the limit.conf configuration file. vi Open /etc/security/limit.conf and then modify the number of monitoring handles.

*               soft    nofile         524288
*               hard    nofile         524288

: wq after saving and restarting, the problem is solved successfully.

[Solved] Vue Project startup error: no eslint configuration found

rimraf node_ Modules delete node_ modules

Delete package lock json

npm init -y

npm install eslint –save-dev

Add manually the following code is configured for the eslintrc.js  file. The rules can be configured by themselves

module.exports = {
    root: true,
    parserOptions: {
      parser: 'babel-eslint',
      sourceType: 'module'
    },
    env: {
      browser: true,
      node: true,
      es6: true,
    },
    extends: ['plugin:vue/recommended', 'eslint:recommended'],
  
    // add your custom rules here
    //it is base on https://github.com/vuejs/eslint-config-vue
    rules: {
      "vue/max-attributes-per-line": [2, {
        "singleline": 10,
        "multiline": {
          "max": 1,
          "allowFirstLine": false
        }
      }],
      "vue/singleline-html-element-content-newline": "off",
      "vue/multiline-html-element-content-newline":"off",
      "vue/name-property-casing": ["error", "PascalCase"],
      "vue/no-v-html": "off",
      'accessor-pairs': 2,
      'arrow-spacing': [2, {
        'before': true,
        'after': true
      }],
      'block-spacing': [2, 'always'],
      'brace-style': [2, '1tbs', {
        'allowSingleLine': true
      }],
      'camelcase': [0, {
        'properties': 'always'
      }],
      'comma-dangle': [2, 'never'],
      'comma-spacing': [2, {
        'before': false,
        'after': true
      }],
      'comma-style': [2, 'last'],
      'constructor-super': 2,
      'curly': [2, 'multi-line'],
      'dot-location': [2, 'property'],
      'eol-last': 2,
      'eqeqeq': ["error", "always", {"null": "ignore"}],
      'generator-star-spacing': [2, {
        'before': true,
        'after': true
      }],
      'handle-callback-err': [2, '^(err|error)$'],
      'indent': [2, 2, {
        'SwitchCase': 1
      }],
      'jsx-quotes': [2, 'prefer-single'],
      'key-spacing': [2, {
        'beforeColon': false,
        'afterColon': true
      }],
      'keyword-spacing': [2, {
        'before': true,
        'after': true
      }],
      'new-cap': [2, {
        'newIsCap': true,
        'capIsNew': false
      }],
      'new-parens': 2,
      'no-array-constructor': 2,
      'no-caller': 2,
      'no-console': 'off',
      'no-class-assign': 2,
      'no-cond-assign': 2,
      'no-const-assign': 2,
      'no-control-regex': 0,
      'no-delete-var': 2,
      'no-dupe-args': 2,
      'no-dupe-class-members': 2,
      'no-dupe-keys': 2,
      'no-duplicate-case': 2,
      'no-empty-character-class': 2,
      'no-empty-pattern': 2,
      'no-eval': 2,
      'no-ex-assign': 2,
      'no-extend-native': 2,
      'no-extra-bind': 2,
      'no-extra-boolean-cast': 2,
      'no-extra-parens': [2, 'functions'],
      'no-fallthrough': 2,
      'no-floating-decimal': 2,
      'no-func-assign': 2,
      'no-implied-eval': 2,
      'no-inner-declarations': [2, 'functions'],
      'no-invalid-regexp': 2,
      'no-irregular-whitespace': 2,
      'no-iterator': 2,
      'no-label-var': 2,
      'no-labels': [2, {
        'allowLoop': false,
        'allowSwitch': false
      }],
      'no-lone-blocks': 2,
      'no-mixed-spaces-and-tabs': 2,
      'no-multi-spaces': 2,
      'no-multi-str': 2,
      'no-multiple-empty-lines': [2, {
        'max': 1
      }],
      'no-native-reassign': 2,
      'no-negated-in-lhs': 2,
      'no-new-object': 2,
      'no-new-require': 2,
      'no-new-symbol': 2,
      'no-new-wrappers': 2,
      'no-obj-calls': 2,
      'no-octal': 2,
      'no-octal-escape': 2,
      'no-path-concat': 2,
      'no-proto': 2,
      'no-redeclare': 2,
      'no-regex-spaces': 2,
      'no-return-assign': [2, 'except-parens'],
      'no-self-assign': 2,
      'no-self-compare': 2,
      'no-sequences': 2,
      'no-shadow-restricted-names': 2,
      'no-spaced-func': 2,
      'no-sparse-arrays': 2,
      'no-this-before-super': 2,
      'no-throw-literal': 2,
      'no-trailing-spaces': 2,
      'no-undef': 2,
      'no-undef-init': 2,
      'no-unexpected-multiline': 2,
      'no-unmodified-loop-condition': 2,
      'no-unneeded-ternary': [2, {
        'defaultAssignment': false
      }],
      'no-unreachable': 2,
      'no-unsafe-finally': 2,
      'no-unused-vars': [2, {
        'vars': 'all',
        'args': 'none'
      }],
      'no-useless-call': 2,
      'no-useless-computed-key': 2,
      'no-useless-constructor': 2,
      'no-useless-escape': 0,
      'no-whitespace-before-property': 2,
      'no-with': 2,
      'one-var': [2, {
        'initialized': 'never'
      }],
      'operator-linebreak': [2, 'after', {
        'overrides': {
          '?': 'before',
          ':': 'before'
        }
      }],
      'padded-blocks': [2, 'never'],
      'quotes': [2, 'single', {
        'avoidEscape': true,
        'allowTemplateLiterals': true
      }],
      'semi': [2, 'never'],
      'semi-spacing': [2, {
        'before': false,
        'after': true
      }],
      'space-before-blocks': [2, 'always'],
      'space-before-function-paren': [2, 'never'],
      'space-in-parens': [2, 'never'],
      'space-infix-ops': 2,
      'space-unary-ops': [2, {
        'words': true,
        'nonwords': false
      }],
      'spaced-comment': [2, 'always', {
        'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
      }],
      'template-curly-spacing': [2, 'never'],
      'use-isnan': 2,
      'valid-typeof': 2,
      'wrap-iife': [2, 'any'],
      'yield-star-spacing': [2, 'both'],
      'yoda': [2, 'never'],
      'prefer-const': 2,
      'no-debugger': process.env.NODE_ENV === 'production' ?2 : 0,
      'object-curly-spacing': [2, 'always', {
        objectsInObjects: false
      }],
      'array-bracket-spacing': [2, 'never']
    },
    globals: {
      'AMap': false,
      'AMapUI': false,
      '__webpack_public_path__': true
    }
  }
  

How to Solve Vue-devtool Package Error

Error in installing Vue devtool

An error occurs when NPM run build is packaged:

lerna ERR! yarn run build exited 1 in '@vue/devtools-api'
lerna ERR! yarn run build stdout:
yarn run v1.22.17
$ rimraf lib && yarn build:esm && yarn build:cjs
$ tsc --module es2015 --outDir lib/esm -d
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
lerna ERR! yarn run build stderr:
'tsc' �����ڲ����ⲿ���Ҳ���ǿ����еij���
���������ļ���
error Command failed with exit code 1.
error Command failed with exit code 1.
lerna ERR! yarn run build exited 1 in '@vue/devtools-api'
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: `lerna run build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build 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!     C:\Users\cy\AppData\Roaming\npm-cache\_logs\2021-12-17T01_31_16_860Z-debug.log
PS D:\Download\devtools-main\devtools-main> yarn build
yarn run v1.22.17
$ lerna run build
lerna notice cli v4.0.0
lerna info Executing command in 9 packages: "yarn run build"
lerna ERR! yarn run build exited 1 in '@vue/devtools-api'
lerna ERR! yarn run build stdout:
$ rimraf lib && yarn build:esm && yarn build:cjs
$ tsc --module es2015 --outDir lib/esm -d
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
lerna ERR! yarn run build stderr:
'tsc' �����ڲ����ⲿ���Ҳ���ǿ����еij���
���������ļ���
error Command failed with exit code 1.
error Command failed with exit code 1.
lerna ERR! yarn run build exited 1 in '@vue/devtools-api'
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Solution:

Windows cannot use RM

The RM -RF command under linux is used, and your computer is windows
solution: replace the RM -RF command with the rimraf command

The rimraf` package is a `nodejs` package that recursively deletes files, the same as `rm -rf under `Linux`.

Install rimraf, NPM install rimraf — save dev

Search RM – RF to find the package in two locations json :

Replace RM -rf with rimraf

Finally, yarn install, yarn build

It worked~

webpack 5.64.2 compiled successfully in 104506 ms
lerna success run Ran npm script 'build' in 9 packages in 146.2s:
lerna success - @vue/devtools-api
lerna success - @vue-devtools/app-backend-api
lerna success - @vue-devtools/app-backend-core
lerna success - @vue-devtools/app-backend-vue1
lerna success - @vue-devtools/app-backend-vue2
lerna success - @vue-devtools/app-backend-vue3
lerna success - @vue-devtools/shared-utils
lerna success - @vue-devtools/shell-chrome
lerna success - @vue/devtools
Done in 153.65s.

[Solved] Echart Error: Typeerror: axis Getaxesonzeroof is not a function

When using echart, it is clear that all parameters are passed in, but this. Is used in echart When init() initializes, it reports an error typeerror: axis Getaxesonzeroof is not a function. Through exclusion one by one, it is found that this error will occur when the data in the xaxis attribute is [].

Of course, my problem is not your problem, please analyze the specific problem!!!

My xaxis:

xAxis: {
    type: 'category',
    axisTick: {
      alignWithLabel: true
    },
    data: data
  }

Finally, my solution is:

if (this.data.length) {
  this.dom.setOption(option);
} else {
  this.dom.setOption({});   // Auto replace the first option
}

[Solved] electron project Package Error: spawn exe\dll ENOENT

Error after electron packaging: spawn exe enoent error solution.

Today, an error occurred when the project was running after packaging: spawn exe enoent error. When looking for a solution, I thought it should be that the referenced exe program was packaged into the app It is caused by the ASAR file, so the EXE file is not packaged into the app ASAR files should solve the problem.

I packed it with electron builder in Vue config.JS file, in Vue config.JS add the following code

pluginOptions: {
		electronBuilder: {
			builderOptions: {
				asar: true,
				asarUnpack: ['exeFiles'],//The folder where the referenced dll/exe files are stored
				extraFiles: {
					from: 'exeFiles',// the folder where the referenced dll/exe files are stored, my project is in the same directory as vue.config.js
					to: '. /exeFiles'//the location of the folder after packaging, I packaged this way before and after the reference relationship does not change, spawn code will not have to change
				},		
		}
	}

If you use the older version of Vue cli, it should be in package JSON, the principle is similar.

[Solved] Error: Cannot find module ‘@/views/xxx‘ at webpackEmptyContext

When you clone a Vue project from the open source platform, it is reported that the corresponding module cannot be found after logging in.

After searching a lot, it was finally solved.

export const loadView = (view) => {
  return () => import(`@/views/${view}`)
}

Change to the following

export const loadView = (view) => {
  return (resolve) => require([`@/views/${view}`], resolve)
}

It can be solved.

Cause: there is a problem with the webpack version. Dynamic import in webpack 4 does not support variable mode

The project can be seen in the elephant template.

[Solved] Vue console error: navigationduplicated: avoided redundant navigation to current location

Its tip is to avoid redundant navigation to the current location. Simply put, the same route is triggered repeatedly.

The solution is as follows:
in the router folder, click index Add these lines of code to the JS file:

const originalPush = Router.prototype.push

//Error Messages: NavigationDuplicated: Avoided redundant navigation to current location
Router.prototype.push = function push(location) {
	return originalPush.call(this, location).catch(err => err)
}

The detailed location is as follows:

However, he uses vuerouter instead of router. I don’t know if it’s the Vue router version.

[Solved] Input error: this. Getoptions is not a function

Reproduction steps:

1. The project was created using Vue cli

2. Install less4 x, less-loader10.X development dependency

3. After using lang = “less” in the single file Vue component, the compilation error is found, syntax error: typeerror: this getOptions is not a function

Reason: the version of less loader is too high. Uninstall and reinstall

// uninstall less
npm uninstall less-loader
npm uninstall less

// re-install less3.5.0、less-loader7.3.0
npm i -D [email protected]
npm i -D [email protected]

Module not found: Error: Can‘t resolve ‘sass-loader‘ in…

sass-loader!

Failed to compile.

./src/main.js
Module not found: Error: Can't resolve 'sass-loader' in 'E:\study_software\JetBrains\WebStorm2021\WebstormProjects\vue-element-admin-master'

npm install sass-loader sass webpack --save-dev
npm install --save-dev node-sass
or
cnpm install node-sass --save

sass-loader: https://www.npmjs.com/package/sass-loader