I have developed a blog with Nuxtjs, everything work fine in dev mode, but after i deployed the aplication to my cpanel server, the landing page (index.vue) (i mean http://www.website.com/) show This page could not be found Back to the home page and after a few seconds the page load but not properly, the bootstrap and all the Swipers doesn't load, and i cannot use anything, but if i navigate to http://www.website.com/about-us all work fine, the bootstrap is loaded and the all the swipers are working fine.
I mean: http://www.website.com/ -> only load after a few seconds, doesnt load plugins. http://www.website.com/about-us -> works perfectly
And the title changed to "Failed to execute 'setAttribute' on 'Element': '-left' is not a valid attribute name." and i have the follow erros in Erros in console (edited: adblock errors no longer apeard, new console error:)
I have searched a lot but i didn't find any solution.
What i have already done:
I have created a home.vue file and i pasted all the code from the index.vue file and whene i go to http://www.website.com/home, everything is loading and working fine, so the problem is not from the code in index.vue, i also tried whitout any script or styles in the page and it's not from that too, even if the index.vue only had one tag the problem appear.
I also tried to redirect from / to /home with:
export default {
created() {
this.$router.push('/home')
},
}
But the page take time to redirect and the error still appear before taken to the /home directory.
I also tried to change the landing page in the routes, but we no success.
Can someone please help me solve my problem? I can't find any solution online
my nuxt.config:
import Vue2Filters from 'vue2-filters'
export default {
mixins: [Vue2Filters.mixin],
// Global page headers (https://go.nuxtjs.dev/config-head)
head: {
title: 'Ana Rita Soares',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
{ hid: 'robots', name: 'robots', content: 'noindex, nofollow' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'
},
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css?family=Roboto&display=swap'
},
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap'
},
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css2?family=Ubuntu'
}
]
},
pageTransition: {
name: 'page',
mode: 'out-in'
},
// Global CSS (https://go.nuxtjs.dev/config-css)
css: [
],
// Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
plugins: [
{ src: '@/plugins/VueAwesomeSwiper.js', mode: 'client' },
{ src: '~/plugins/vue-gallery.client.js'},
{ src: '~plugins/vue-lazy-youtube-video.js'},
{ src: '~/plugins/vue2-filters'}
],
// Auto import components (https://go.nuxtjs.dev/config-components)
components: true,
// Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
buildModules: [
'@nuxtjs/fontawesome',
],
fontawesome: {
icons: {
solid: true,
brands: true
}
},
// Modules (https://go.nuxtjs.dev/config-modules)
modules: [
// https://go.nuxtjs.dev/axios
'@nuxtjs/axios',
'@nuxt/http',
'bootstrap-vue/nuxt',
'@nuxtjs/google-gtag',
'@nuxtjs/google-analytics',
],
'google-gtag': {
id: 'GTM-TT3XJF5',
config: {
anonymize_ip: true, // anonymize IP
send_page_view: false, // might be necessary to avoid duplicated page track on page reload
linker: {
domains: ['domain.com','domain.org']
}
},
debug: true, // enable to track in dev mode
disableAutoPageTrack: true, // disable if you don't want to track each page route with router.afterEach(...).
},
googleAnalytics: {
id: 'UA-45807418-1'
},
http: {
// proxyHeaders: false
baseURL: 'https://anaritasoares.herokuapp.com/'
},
// Axios module configuration (https://go.nuxtjs.dev/config-axios)
axios: {},
// Build Configuration (https://go.nuxtjs.dev/config-build)
build: {
// para ocupar menos de 500k e evitar o erro a dar build
babel: {
compact: true
}
}
}
my package.json
{
"name": "arsv2",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt --hostname mbsample.com --port 49000",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"deploy": "pm2 start npm --name arsv2 -- start",
"stop": "pm2 stop npm --name arsv2 -- stop"
},
"dependencies": {
"@fortawesome/free-brands-svg-icons": "^5.15.1",
"@fortawesome/free-solid-svg-icons": "^5.15.1",
"@nuxt/http": "^0.6.1",
"@nuxtjs/axios": "^5.12.2",
"@nuxtjs/fontawesome": "^1.1.2",
"@nuxtjs/google-gtag": "^1.0.4",
"@nuxtjs/gtm": "^2.4.0",
"bootstrap-vue": "^2.21.2",
"core-js": "^3.6.5",
"nuxt": "^2.14.6",
"nuxt-ssr-screen-size": "^1.0.0",
"pm2": "^4.5.5",
"swiper": "^5.4.5",
"vue": "^2.6.12",
"vue-awesome-swiper": "^4.1.1",
"vue-gallery": "^2.0.1",
"vue-lazy-youtube-video": "^2.3.0",
"vue-showdown": "^2.4.1",
"vue2-filters": "^0.12.0"
},
"devDependencies": {
"@nuxt/image": "0.0.4",
"@nuxtjs/google-analytics": "^2.4.0",
"node
-sass": "^5.0.0",
"sass-loader": "^10.1.1" }, "config": {
"nuxt": {
"host": "0.0.0.0",
"port": "49000"
} } }