I successfully created a blog using Nuxtjs and everything was working perfectly in development mode. However, when I deployed the application to my cPanel server, the landing page (index.vue) at showed an error message saying This page could not be found Back to the home page. After a few seconds, the page finally loaded but did not display properly. The Bootstrap and Swipers were not loading, rendering them unusable. Interestingly, if I navigated to , everything worked seamlessly with Bootstrap and Swipers functioning correctly.
In summary: -> loads slowly and plugins fail to load. -> works perfectly
The title also changed to "Failed to execute 'setAttribute' on 'Element': '-left' is not a valid attribute name". Additionally, several console errors were detected: Console Errors (edited: adblock errors no longer appearing, new console error found:https://i.sstatic.net/Uo9Gr.png). Despite extensive searching, I have been unable to find a solution to these issues.
Here are the steps I have already taken:
I created a home.vue file and copied all the code from the index.vue file. When I accessed , everything functioned flawlessly, indicating that the problem does not lie within the code of index.vue. Even stripping away all scripts and styles did not resolve the issue, suggesting that a single tag in index.vue would trigger the problem.
I attempted redirection from '/' to '/home' with the following script:
export default {
created() {
this.$router.push('/home')
},
}
However, the redirect suffered a delay and the error persisted before transitioning to the /home directory.
Moreover, changing the landing page in the routes proved unsuccessful in resolving the issue.
I am seeking assistance as I have exhausted all online resources without finding a solution.
Below is a snippet of my nuxt.config:
import Vue2Filters from 'vue2-filters'
// Configuration details go here...
Lastly, here's an excerpt from my package.json for reference:
{
"name": "arsv2",
"version": "1.0.0",
// Remaining package.json content...
}