Tag Archives: View.js

[Vue warn]: Error in render: “TypeError: Cannot read properties of undefined 

   [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined

Cause: rendering error:

Conclusion: in the expression A.B.C, if there is no object B in object a, then reading the value in object A.B.C will naturally report an error. If it is a two-level expression A.B, no error will be reported and undefined will be returned, The third floor will report an error

Solution:


    <!-- Use the error report directly -->
    {{sku[0].skuName}}

    <!--  Solution  -->
    <template v-if="sku[0]"> {{sku[0].skuName}}</template>

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

 

ERROR command failed: npm install –loglevel error vue-cli-plugin-cube-ui -D

Execute the command at the vscode terminal: Vue add cube UI reports an error   Command failed: NPM install — loglevel error Vue cli plugin cube UI – d the solution is as follows:

Exit vscode – & gt; Right click the visual studio code icon – & gt; Click Properties – & gt; Click compatibility – & gt; Check the “run this program as administrator” option – & gt; Click OK

 

[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)

[Vue warn]: Invalid prop: type check failed for prop “disabled“

[Vue warn]: invalid prop: type check failed for prop “disabled”
Translation:
the attribute is invalid: the type check of the attribute “disabled” fails. It should be a Boolean value, and the obtained string value is “isdisabledfn()”
solution:
in the code: disabled is a Boolean value, but the judgment statement result is not a Boolean value. Just convert it.

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.

Front end Vue project operation error module build failed

Scenario Description: when a Vue project of someone else is running on vscode, the download dependency process is normal, and the run dev reports an error. The information is as follows
in many cases, this error is because the node version required for project operation is inconsistent with your local node version. Just switch back to the normal version

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