Nuxtjs 登陆页面未加载，但其余工作正常

Question

我用 Nuxtjs 开发了一个博客，在开发模式下一切正常，但是在我将应用程序部署到我的 cpanel 服务器后，登录页面 (index.vue)（我的意思是 http://www.website.com/）显示 This page could not be found Back to the home page 及之后几秒钟后页面加载但不正确，引导程序和所有 Swiper 都没有加载，我不能使用任何东西，但是如果我导航到 http://www.website.com/about-us 一切正常，则加载引导程序并且所有 swiper 都在工作很好。

我的意思是： http://www.website.com/ -> 仅在几秒钟后加载，不加载插件。 http://www.website.com/about-us -> 完美运行

并且标题更改为“无法在'元素'上执行'setAttribute'：'-left'不是有效的属性名称。”我在Erros in console 中有以下错误（已编辑：adblock 错误不再出现，新的控制台错误:) 我已经搜索了很多，但我没有找到任何解决方案。

我已经做了什么：

我创建了一个 home.vue 文件并粘贴了 index.vue 文件中的所有代码，当我转到 http://www.website.com/home 时，一切都在加载并且工作正常，所以问题不在于 index.vue 中的代码。 vue，我也尝试在页面中去掉任何脚本或样式，但它也不是来自那个，即使 index.vue 只有一个标签也会出现问题。

我还尝试使用以下命令从 / 重定向到 /home：

export default {
 created() {
 this.$router.push('/home')

},
}

但是页面重定向需要时间，并且在转到/home目录之前仍然出现错误。

我也尝试更改路线中的登陆页面，但没有成功。

有人可以帮我解决我的问题吗？我在网上找不到任何解决方案

我的 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
    }
  }
}

我的 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"
    }   } }

Answer 1

问题解决了！

我的 .htaccess 文件有错误，如果您有同样的问题，请使用我的 .htaccess 配置：

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