我刚刚部署了我的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));
}
1条答案
按热度按时间c6ubokkw1#
OP使用
client-only
解决了该问题,如下所示:https://stackoverflow.com/a/67978474/8816585在使用
v-for
时修复一些唯一ID键也有帮助。我还建议this solution有一个通用的方式使用图标,没有所有的痛苦或设置它和处理各种怪癖。