标签: vue-meta
尝试使用字符串+变量设置Vue元页面标题
我使用 Vue Meta 作为使用 Nuxt JS 2.4.5 的项目中博客应用程序的一部分
我在尝试设置标题+变量时遇到一些麻烦data ()，我不确定我错过了什么
我已经尝试了多次尝试让它工作，移动代码，使用this手动设置它，似乎没有任何效果......
<script>
import BlogsFromJson from '~/static/articles/blogs.json';
export default {
head: {
title: 'My Website: Blog: ' + this.myBlogTitle, // or something else
meta: [
{ hid: 'description', name: 'description', content: 'Read the latest news and articles from Flex Repay UK.' }
]
},
data () {
return {
title: this.$route.params.title,
blog: BlogsFromJson,
myBlogTitle: 'some title'
}
}
}
</script>
我尝试在其中设置一个变量data ()并静态使用它。
这样做应该给我My Website: …
推荐指数
解决办法
查看次数
Nuxt/Vue-meta：info.meta.filter不是一个函数
我正在开发一个以通用模式运行 Nuxt 的网站。我们与另一位开发人员一起为此工作了几个月。我们使用 Git 在不同的分支上进行协作，然后在发布新版本网站时将其集成。
从昨天开始，我们遇到了一些我们无法正确解释的事情。每当我尝试运行nuxt,时nuxt generate，npm install <package-name>应用程序都会崩溃并出现相同的错误：
我们怀疑这可能与我们最近的Babel/Webpack升级有关package.json，因为我们收到的错误也提到了一些core-js错误。所有这一切的奇怪之处在于，当我们恢复到旧的提交时，应用程序仍然崩溃并出现完全相同的错误。只有在本地删除存储库并再次克隆它并安装所有依赖项之后npm install，我们才能恢复到相同的提交并使网站再次启动并运行。
我们的其他一些信息package.json：
"scripts": {
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"dev": "HOST=0.0.0.0 nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"dependencies": {
"axios": "^0.19.0",
"gsap": "^3.0.1",
"nuxt": "^2.10.2",
"swiper": "^5.2.1",
"vue-svg-loader": "^0.12.0"
},
"devDependencies": {
"@nuxtjs/eslint-config": "^1.1.2",
"@nuxtjs/eslint-module": "^0.2.1",
"babel-eslint": "^10.0.3",
"eslint": "^5.15.1",
"eslint-config-prettier": "^4.1.0",
"eslint-plugin-nuxt": "^0.5.0",
"eslint-plugin-prettier": "^3.1.1",
"node-sass": …推荐指数
解决办法
查看次数
Vue JS 中的开放图元标签不显示图像
我设计了一个博客，我希望在分享到社交网络时，预览图像会像在Medium 的帖子中一样显示
<meta property="og:image" content="https://medium.com/js-dojo/getting-your-head-around-vue-js-scoped-slots-281bf82a1e4e"/>
我使用带有 webpack 和 vue-meta 的 vuejs2 来更改我帖子的动态图像。但是对于 Facebook，即使我将它们放在 index.html 中也不起作用。
我在medium上找到这篇文章，说必须使用Server Side Rendered，但没有说如何从具有基本配置（没有SSR）的完全设计的项目迁移到解决问题的项目。架构已经不同了，我没有参考
这是我的代码vue-meta
metaInfo () {
return {
title: '41devs | blog',
titleTemplate: '%s - le titre',
meta: [
{name: 'viewport', content: 'user-scalable=no'},
{property: 'og:title', content: 'title'},
{property: 'og:type', content: 'article'},
{property: 'og:url', content: 'http://c5e3b0ec.ngrok.io/blog/s'},// here it is just ngrok for my test
{property: 'og:description', content: 'description'},
{property: 'og:image', content: 'https://firebasestorage.googleapis.com/v0/b/dev-blog-2503f.appspot.com/o/postsStorage%2F-KxXdvvLqDHBcxdUfLgn%2Fonfleck?alt=media&token=24a9bf5b-dce2-46e8-b175-fb63f7501c98'},
{property: 'twitter:image:src', content: 'https://firebasestorage.googleapis.com/v0/b/dev-blog-2503f.appspot.com/o/postsStorage%2F-KxXdvvLqDHBcxdUfLgn%2Fonfleck?alt=media&token=24a9bf5b-dce2-46e8-b175-fb63f7501c98'},
{property: 'og:image:width', …推荐指数
解决办法
查看次数
如何在 Vue Meta 3 中创建自定义元标签？
我用来Vue Meta 3向网站提供元数据。该 API 在这里
我不明白如何提供自定义元标记（例如 Open Graph 标记，例如og:type）。这是我在组件中尝试做的事情：
setup() {
useMeta({
title: "Homepage",
meta: [
{name: "hunky:dory", content: "website"}
],
description: "This is the homepage."
})
},
输出的 HTML 最终如下所示：
<head>
<title>Homepage</title>
<meta name="description" content="This is the homepage.">
<meta name="meta" content="website"> <!-- should be <meta name="hunky:dory content="website"> -->
</head>
如果我将代码更改为：
setup() {
useMeta({
title: "Homepage",
"hunky:dory": [
{content: "website"}
],
description: "This is the homepage."
})
},
我得到非法的 HTML 输出：
<head>
<title>Homepage</title>
<meta name="description" …推荐指数
解决办法
查看次数
如何在元信息中使用 Vue 变量？
脚本中这一行 Vue 的正确语法是什么：
export default {
metaInfo: {
title: "{product.name} wallpaper",
这条线变成了这样：
title: "Space wallpaper",
product.name 我在 api 中得到它：
mounted()
{
let vm = this
vm.getProducts();
},
methods: {
getProducts() {
let vm = this
axios.get('/api/products')
.then(function(response) {
vm.products = response.data.data
})
推荐指数
解决办法
查看次数