Nuxtjs landing page does't load but the rest work fine

Viewed 474

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:)errors after edit 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"
    }   } }
1 Answers

Problem solved!

My .htaccess file had an error, if you have the same problem use my .htaccess config:

RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteRule ^index.php(.*) http://%{HTTP_HOST}:49000/$1 [P,L]
RewriteRule (.*) http://%{HTTP_HOST}:49000/$1 [P,L]
Related