The cause of the error, I guess, is mostly a version problem
Add the following code to router/index.JS
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
As follows:
So far, the problem is solved
[Vue warn]: Error compiling template：Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
Template compilation error: The template is used as a response to the mapping UI interface. It is forbidden to place side-effect tags in the template, such as <script>, because they will not be parsed.
As follows,
Under the PyCharm smart labeling error, I found the error, and I lost a </div> tag in my source code.
But the browser mentally added the missing </div> tag before the </body> tag and after the </script> tag. As a result, such a warning occurred. Since a page is a div, this is why the console displays the entire body part of the page.
Avoid using non-primitive values as keywords, and use string/numeric values instead.
Solution:
<el-carousel class="swiper-container" :interval="5000" arrow="hover" @change="carouselItem">
<el-carousel-item v-for="item in photoList" :key="item">
<div class="swiper-slide">
<div class="swiper" v-for="index in item">
<a @click='goTo(2)' ><img :src="index" /></a>
</div>
</div>
</el-carousel-item>
</el-carousel>
In the for loop, the bound key value cannot be an object, but a string or value, as shown in the following figure:
<el-carousel class="swiper-container" :interval="5000" arrow="hover" @change="carouselItem">
<el-carousel-item v-for="item in photoList" :key="item.id">
<div class="swiper-slide">
<div class="swiper" v-for="index in item">
<a @click='goTo(2)' ><img :src="index" /></a>
</div>
</div>
</el-carousel-item>
</el-carousel> <--- Last few GCs --->
[19572:000001F6D0A888C0] 2084451 ms: Mark-sweep 2001.3 (2054.1) -> 1995.6 (2053.7) MB, 61.1 / 0.0 ms (average mu = 0.173, current mu = 0.145) allocation failure scavenge might not succeed
[19572:000001F6D0A888C0] 2084524 ms: Mark-sweep 1997.2 (2053.9) -> 1995.4 (2053.9) MB, 64.6 / 0.0 ms (average mu = 0.146, current mu = 0.116) allocation failure scavenge might not succeed
<--- JS stacktrace --->
==== JS stack trace =========================================
node v8 storage overflow
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
"dev": "node --max-old-space-size=4096 node_modules/nuxt/bin/nuxt.js dev",
"build": "node --max-old-space-size=4096 node_modules/nuxt/bin/nuxt.js build",
"start": "node --max-old-space-size=4096 node_modules/nuxt/bin/nuxt.js start",
"generate": "node --max-old-space-size=4096 node_modules/nuxt/bin/nuxt.js generate"The error message is as follows
The reason is that the name of the imported component is the same as the name of the component you defined , as shown in the following two places
Solution: modify the name of the custom component to ensure that the imported component name is unique
Failed to compile.
./node_modules/vue-loader/lib/template-compiler?{“id”:”data-v-59926570″,”hasScoped”:true,”transformToRequire”:{“video”:[“src”,”poster”],”source”:”src”,”img”:”src”,”image”:”xlink:href”},”buble”:{“transforms”:{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/page/home/Home.vue (Emitted value instead of an instance of Error)
Error compiling template:
<div><el-header class=”animated faedOutUp”><myHeader></myHeader></el-header></div> <div>Home</div>
– Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
@ ./src/page/home/Home.vue 11:0-366
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
Error Codes:
<template>
<div><el-header class="animated faedOutUp"><myHeader></myHeader></el-header></div>
<div>Home</div>
</template>It is revised as follows
<template>
<div>
<el-header class="animated faedOutUp"><myHeader></myHeader></el-header>
<div>Home</div>
</div>
</template>Save run, error solved
Today, after adding a new page, no data can be found on the home page. Error: request failed with status code 404
I didn’t get the data from the background. At the beginning, I thought it was a problem with the background control layer. I searched for it for a long time
Finally, we found that the proxy proxy was not configured in APP/config/index.js, and the request was not routed from nodejs to Tomcat
So with the configuration, the data is found successfully
