如何解决Nuxt js动态路由元标记和打开图在部署时不起作用
我想在 nuxt js 上使用 mata 标签和开放图进行 SEO 目的。项目。它在本地和服务器上都可以正常工作,第一个子路由像
pages > homepage > index.vue
但是当我尝试将它与更深的子路由一起使用时,它仅适用于本地但在部署服务器元标记时使用默认元数据
页面 > 表单 > _slug.vue
_slug.vue
<script>
import meta from '@assets/data/meta-tag.json'
export default {
data() {
return {
metaData: meta.metaDetail,}
},head() {
return {
title: this.metaData.title,meta: [
{
hid: 'og:title',name: 'og:title',content: this.metaData.title,},{
hid: 'og:url',name: 'og:url',content: this.$route.fullPath,{
hid: 'og:type',name: 'og:type',content: 'article',{
hid: 'og:description',name: 'og:description',content: this.metaData.description,{
hid: 'og:image',name: 'og:image',content: this.metaData.image,],}
</script>
meta-tag.json
{
"metaDetail": {
"title": "Website Title","description": "Website Description","image": "/share_image/img.png"
},}
package.json
{
"name": "www-project","version": "1.0.0","private": true,"scripts": {
"dev": "NODE_ENV=dev nuxt","build": "nuxt build","start": "nuxt start","generate": "nuxt generate","lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .","lint": "yarn lint:js","test": "jest"
},"dependencies": {
"@fortawesome/fontawesome-free": "^5.15.3","@nuxt-hero-icons/outline": "^1.0.1","@nuxt-hero-icons/solid": "^1.0.1","@nuxtjs/axios": "^5.13.1","autoprefixer": "^10.2.5","axios": "^0.21.1","core-js": "^3.9.1","country-state-city": "^2.0.0","is-url-external": "^1.0.3","lodash": "^4.17.21","nuxt": "^2.15.3","nuxt-tailvue": "^1.0.82","swiper": "^6.5.7","v-click-outside": "^3.1.2","vue-awesome-swiper": "^4.1.1","vue-element-loading": "^2.0.2","vue-multiselect": "^2.1.6","vue-select": "^3.11.2","vue-spinner": "^1.0.4","vue-toastification": "^1.7.11","vue-transition-expand": "^0.1.0","vuelidate": "^0.7.6"
},"devDependencies": {
"@nuxtjs/eslint-config": "^6.0.0","@nuxtjs/eslint-module": "^3.0.2","@nuxtjs/google-fonts": "^1.3.0","@nuxtjs/tailwindcss": "^4.0.1","@vue/test-utils": "^1.1.3","babel-core": "7.0.0-bridge.0","babel-eslint": "^10.1.0","babel-jest": "^26.6.3","eslint": "^7.22.0","eslint-config-prettier": "^8.1.0","eslint-plugin-nuxt": "^2.0.0","eslint-plugin-prettier": "^3.3.1","eslint-plugin-vue": "^7.7.0","jest": "^26.6.3","postcss": "^8.2.8","prettier": "^2.2.1","sass": "^1.32.8","sass-loader": "^10.1.1","vue-jest": "^3.0.4"
}
}
有人发现过这种情况吗?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。