Tag Archives: javascript

Error in v-on handler (Promise/async): “[object Object]“

Put the request processing in main.js:

axios.interceptors.response.use(
  response => {
    if (response.data.code != 0) {
      return Promise.reject(response);
    }
    return response.data
  }
)

It is found that when the code returned by the back end is not zero, that is, when return promise.rehect (response) is executed, although the code runs normally, the console will report an error:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler (Promise/async): "[object Object]"

found in

---> <Login> at src/views/Login.vue
       <App> at src/App.vue
         <Root>

Find the problem on the Internet and find that the exception of promise.rehect (response) needs to be captured, but most of them are captured in the component. Isn’t it meaningless to put the judgment in the main file, so you can put the capture processing in the main file, as follows:


axios.interceptors.response.use(
  response => {
    if (response.data.code != 0) {
      Message({content: response.data.message});
      return Promise.reject(response).catch(()=>{});
    }
    return response.data
  },
 )

That is, add . Catch (() = & gt; {}) directly after promise. Rehect (response) , which is currently valid for personal testing.

Error: timeout of 5000ms exceeded error is always reported during post request

The error: timeout of 5000ms exceeded error is always reported in the post request, but there is no problem with the get request. The front-end uses the Vue element admin framework.

terms of settlement:

//Use before for mock data and after for back-end interface. Otherwise, it will request a failure message with a timeout of 5000ms or delete it directly

 

[Solved] error C:\Users\HP\Desktop\VueProject\vue_cli\node_modules\node-sass: Command failed.Exit code: 1

Vue-cli scaffolding to build a Vue project reports an error due to the installation of node-sass:

error C:\Users\HP\Desktop\VueProject\vue_cli\node_modules\node-sass: Command failed.
Exit code: 1
Command: node scripts/build.js
Arguments:
Directory: C:\Users\HP\Desktop\VueProject\vue_cli\node_modules\node-sass
Output:
Building: C:\Program Files\nodejs\node.exe C:\Users\HP\Desktop\VueProject\vue_cli\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
gyp verb cli [
gyp verb cli   'C:\\Program Files\\nodejs\\node.exe',
gyp verb cli   'C:\\Users\\HP\\Desktop\\VueProject\\vue_cli\\node_modules\\node-gyp\\bin\\node-gyp.js',
gyp verb cli   'rebuild',
gyp verb cli   '--verbose',
gyp verb cli   '--libsass_ext=',
gyp verb cli   '--libsass_cflags=',
gyp verb cli   '--libsass_ldflags=',
gyp verb cli   '--libsass_library='
gyp verb cli ]
gyp info using [email protected]
gyp info using [email protected] | win32 | x64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb download using dist-url https://oss.npmmirror.com/dist/node
gyp verb check python checking for Python executable "python2" in the PATH
gyp verb `which` failed Error: not found: python2
gyp verb `which` failed     at getNotFoundError (C:\Users\HP\Desktop\VueProject\vue_cli\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (C:\Users\HP\Desktop\VueProject\vue_cli\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (C:\Users\HP\Desktop\VueProject\vue_cli\node_modules\which\which.js:80:29)
gyp verb `which` failed     at C:\Users\HP\Desktop\VueProject\vue_cli\node_modules\which\which.js:89:16
gyp verb `which` failed     at C:\Users\HP\Desktop\VueProject\vue_cli\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at C:\Users\HP\Desktop\VueProject\vue_cli\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:198:21)
gyp verb `which` failed  python2 Error: not found: python2
gyp verb `which` failed     at getNotFoundError (C:\Users\HP\Desktop\VueProject\vue_cli\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (C:\Users\HP\Desktop\VueProject\vue_cli\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (C:\Users\HP\Desktop\VueProject\vue_cli\node_modules\which\which.js:80:29)
gyp verb `which` failed     at C:\Users\HP\Desktop\VueProject\vue_cli\node_modules\which\which.js:89:16
gyp verb `which` failed     at C:\Users\HP\Desktop\VueProject\vue_cli\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at C:\Users\HP\Desktop\VueProject\vue_cli\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:198:21) {
gyp verb `which` failed   code: 'ENOENT'
gyp verb `which` failed }
gyp verb check python checking for Python executable "python" in the PATH
gyp verb `which` succeeded python C:\Users\HP\anaconda3\python.EXE
gyp ERR! configure error
gyp ERR! stack Error: Command failed: C:\Users\HP\anaconda3\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack   File "<string>", line 1
gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack                                ^
gyp ERR! stack SyntaxError: invalid syntax
gyp ERR! stack
gyp ERR! stack     at ChildProcess.exithandler (node:child_process:397:12)
gyp ERR! stack     at ChildProcess.emit (node:events:390:28)
gyp ERR! stack     at maybeClose (node:internal/child_process:1064:16)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)
gyp ERR! System Windows_NT 10.0.19043
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\HP\\Desktop\\VueProject\\vue_cli\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd C:\Users\HP\Desktop\VueProject\vue_cli\node_modules\node-sass
gyp ERR! node -v v16.13.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
Build failed with error code: 1
 ERROR  command failed: yarn

 

wrong reason:
The nodejs version is too high, my version is 16.x

Solution:
win+R open the cmd window and enter

node -v

Check the installed node version. If it is not v14.3.0, uninstall the original version and reinstall nodejs of v14.3.0.

Create the project again and solve it successfully!

Nodejs download address of v14.3.0 is attached:

Vue-cli Failed to download repo vuejs-templates/webpack [How to Solve]

Error reason:
as shown in the title, command Vue init webpack Vue through Vue cli tool_ An error is reported when the portal creates a Vue project, indicating that the connection timed out because the intranet cannot be downloaded. The screenshot of the timeout error is as follows:

Solution:
to create offline, we need to download Vue templates/webpack in GitHub warehouse, and then extract it locally.

1. First, create a new .Vue templates directory under the root directory of each user. Note the dot (.)

2. Go to the Internet to download webpack
the download address is: https://github.com/vuejs-templates/webpack After downloading, unzip it to the. Vue templates directory under the local user directory.

3. The downloaded compressed package is webpack-development.zip. After decompression, we need to change the directory name to webpack

4. In this way, we will conduct Vue init webpack When using the Vue_portal command, you need to bring the parameter — offline, which means offline initialization

Vue3. X reports an error using vantui. Failed to resolve component: Van-**-**

Version number:

vue/cli：4.5.12

vant：^3.0.10

Question:

Failed to resolve component: van-cell-group 
  at <Home onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > key=0 >

Reason: the van cell group component is not imported

Solution:

You can import it in the ‘main. JS’ file and then use it on the page

The details are as follows:

import {
	createApp
} from 'vue'
import {
	CellGroup
} from 'vant'
createApp(App).use(CellGroup)

Chunkloaderror caused by deleteoriginalassets: loading chunk * failed error

If you don’t say much, report the error directly:

this error report looks too familiar. After searching online, the general solution is:

1. Record an error in Vue history mode chunkloaderror: loading chunk XX failed net:: err_ Abort 404 (not found) solution

2. Error: loading chunk * failed, Vue router lazy loading error report solution

Follow the example. History, publicpath, onerror, and even the online server. Whatever solution you have, I can’t solve it. There’s no sign that it can be solved. I’m still a local project, and removing lazy loading can’t solve this problem. Why are such errors prompted?

In the end, experienced colleagues have to find the cause of the problem: delete original assets. Finally, just comment it out.

In vue.config.js, it is used to optimize the front-end performance: front-end performance optimization – using gzip compression.

Failed to resolve async component default: ChunkLoadError: Loading chunk 7 failed

Vue project, it says that vue-router.esm.js suddenly reports an error? 8c4f: 16 [Vue router] failed to resolve async component default: chunkloaderror: loading chunk 7 failed. I really can’t find anything wrong,

through the prompt, it’s said that there was a routing error. I reinstalled less according to what I wrote on the Internet, but it didn’t work. Later, I inadvertently changed the name of the lazy load of the route a little, What’s going on? I still haven’t found it. If you have the same problem, you can try to change the wrong route name. In the following figure/*specialvideo*/change the name and store it. The error disappears. I don’t know why

Jest Vue $route error [How to Modify]

Jest Vue $route reported an error

When you run jest, you will always report errors in the page that uses $route. When you add the following code to jest, you will report other errors

FALSE:

test('Create groupManage data', async (done) => {
    wrapper.vm.$nextTick(() => {
      })
      done()
    })
  })

Finally, it was found that the correct router
was not added to the jest file:

import VueRouter from 'vue-router'

describe('groupManage', () => {
  const wrapper = mount(groupManage, {
    global: {
      plugins: [ElementPlus, VueRouter, store],  // Remember to add VueRouter
      mocks: {
        $route: {
          params: {
            image_uuid: '3'   // the data you may use in vue page
          }
        }
      }
    }
  })
})

Another: createlocalvue has been cancelled in the new Vue test utils

React project is packaged and set as required Error [How to Solve]

./node_modules/antd/es/style/index.less (./node_modules/css-loader/dist/cjs.js??ref–6-oneOf-7-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref–6-oneOf-
7-3!./node_modules/less-loader/dist/cjs.js??ref–6-oneOf-7-4!./node_modules/antd/es/style/index.less)
ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.

This is the problem with the less-loader version

yarn remove less-loader
yarn add [email protected]

The Vue mobile terminal cannot use string.replaceall, and the error message is blank

When developing Vue, the replaceall function is used, and there is no problem debugging on the PC side

However, when packaging and deploying to the mobile end test, it is found that some pages are blank and the console only displays error {}

After troubleshooting, the replaceall function reports an error. Replace it with replace

How to Solve React devtools plug-in Error

The developer debugging tool plug-in of react will prompt an error in chrome after installation:

react-refresh-runtime.development.js:465

Solution:

Under the react project (not the plug-in file directory), find \node_Modules\@pmmmwh\react refresh webpack plugin\client

Reactrrefreshentry.js file, comment out this line:

//RefreshRuntime.injectIntoGlobalHook(safeThis);