vue.js Github错误404在控制台上与有效负载js

xfb7svmp  于 2023-01-14  发布在  Vue.js
关注(0)|答案(1)|浏览(162)

我刚刚部署了我的nuxt应用程序,有一些错误的有效载荷js,我不知道这是什么错误。
这是我的文件目录

我发现payload.js file存在错误:...1673214939/<page-name>/payload.js
所有payload.js文件中的代码相同:

__NUXT_JSONP__("/albums", {data:[{}],fetch:{},mutations:[]});

它在localhost上运行良好,但在github中,由于错误,导航栏中的图标无法显示。
这是我的nuxt.config.js和package.json文件:
nuxt.config.js

export default {

  head: {
    title: 'Florida',
    htmlAttrs: {
      lang: 'en',
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },

  target: 'static',
  router: {
    base: '/FloridaGifts/'
  },

  css: ["./assets/main.scss"],

  plugins: [
    {
      src: './plugins/vue-icons.js',
      mode: 'client'
    },
  ],

  components: true,

  buildModules: [
    '@nuxtjs/eslint-module',
    '@nuxtjs/dotenv'
  ],

  modules: [
    'bootstrap-vue/nuxt',
    '@nuxtjs/axios',
    [
      '@nuxtjs/firebase',

      {
        config: {
          apiKey: process.env.API_KEY,
          authDomain: process.env.AUTH_DOMAIN,
          databaseURL: process.env.DATABASE_URL,
          projectId: process.env.PROJECT_ID,
          storageBucket: process.env.STORAGE_BUCKET,
          messagingSenderId: process.env.MESSAGING_SENDER_ID,
          appId: process.env.APP_ID,
          measurementId: process.env.MEASURMENT_ID
        },

        services: {
          auth: {
            initialize: {
              onAuthStateChangedAction: 'onAuthStateChangedAction',
            }
          },
          database: true,
          storage: true
        }
      }
    ]
  ],

  axios: {
    baseURL: '/',
  },

  build: {},
}

package.json

{
  "name": "client",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "deploy": "push-dir --dir=dist --branch=gh-pages --cleanup",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint:prettier": "prettier --check .",
    "lint": "npm run lint:js && npm run lint:prettier",
    "lintfix": "prettier --write --list-different . && npm run lint:js -- --fix",
    "test": "jest"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/dotenv": "^1.4.1",
    "@nuxtjs/firebase": "^8.2.2",
    "bootstrap": "^4.6.2",
    "bootstrap-vue": "^2.22.0",
    "core-js": "^3.25.3",
    "hooper": "^0.3.4",
    "nuxt": "^2.15.8",
    "vue": "^2.7.10",
    "vue-server-renderer": "^2.7.10",
    "vue-template-compiler": "^2.7.10"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.19.1",
    "@nuxtjs/eslint-config": "^11.0.0",
    "@nuxtjs/eslint-module": "^3.1.0",
    "@vue/test-utils": "^1.3.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "^29.1.2",
    "eslint": "^8.24.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-jest": "^27.0.4",
    "eslint-plugin-nuxt": "^4.0.0",
    "eslint-plugin-vue": "^9.5.1",
    "jest": "^29.1.2",
    "jest-environment-jsdom": "^29.1.2",
    "prettier": "^2.7.1",
    "push-dir": "^0.4.1",
    "sass": "^1.56.1",
    "sass-loader": "^10.4.1",
    "vue-jest": "^3.0.4",
    "webpack": "^4.45.0"
  }
}

在部署它时,我运行了以下命令
x1米5英寸x1米6英寸
npm run generate npm run deploy
链接到存储库:repository
链接到gh-pages(部署):deploy
开发中的警告:

DOM不匹配错误的来源:

else if (hasConsole_1 && !config.silent) {
  console.error("[Vue warn]: ".concat(msg).concat(trace));
}
c6ubokkw

c6ubokkw1#

OP使用client-only解决了该问题,如下所示:https://stackoverflow.com/a/67978474/8816585
在使用v-for时修复一些唯一ID键也有帮助。
我还建议this solution有一个通用的方式使用图标,没有所有的痛苦或设置它和处理各种怪癖。

相关问题