Vue-meta动态管理vue项目HTML中head头部信息（可传变量）

最新推荐文章于 2025-12-03 16:22:23 发布
原创 最新推荐文章于 2025-12-03 16:22:23 发布 · 2.4k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #vue.js #html #es6

本文介绍如何在Vue项目中安装和配置vue-meta插件，通过在main.js中引入并正确设置，使组件能够动态地修改SEO元信息，如title、description等，提升网站的搜索引擎优化效果。

1、安装

npm install --save vue-meta plugin

2、引入main.js中

在这里插入图片描述

3、在vue文件中进行如下配置

在这里插入图片描述
在这里插入图片描述在这里插入图片描述
重点注意：其中metaInfo写为一个方法，这样可以接收变量，如果不写为方法的话，无法读取data及computed中的信息。

【不使用vue-cli脚手架 搭建Vue2.0项目环境】
qq_46106080的博客
12-17 2118
项目创建目录结构 一、初始化 npm init -y 二、安装依赖 2.1生产环境依赖 npm install vue vue-router -S 2.2开发环境依赖 npm install babel-loader babel-core vue-loader node-sass sass-loader css-loader style-loader webpack webpack-cli webpack-dev-server html-webpack-plugin vue-template-c
Vue-CLI 对比 HTML 的架构
蜂窝码农的博客
03-29 1881
前言 前端开发，我一直都是用 HTML(5)+Javascript+jQuery+Ajax+CSS3/DIV 架构去开发。这架构很直观、很强大而且很简单。最近因为公司发展需要，要跟新进来的同事合作开发。为了能够跟他们沟通，最近就学习了近几年都很火的 Vue。 Vue-CLI/AngularJS/ReactJS 其实很复杂 刚学习 Vue，尤其是Vue-CLI 时，觉得这东西跟AngularJS 和 ReactJs一样sb（尤其是当你要跨组件传递参数及组件状态的时候）。这个技术的最大卖点就是所谓不用操作DOM
使用vue-meta进行mate动态管理HTML head信息
weixin_30662011的博客
07-24 662
vue-meta的官方文档在这里。文档中比较详细地说明了在浏览器端和服务器端如何使用 vue-meta 修改页面头部信息，这里我主要介绍下在SPA项目中管理meta info的使用方法。， vue单页运用中，对单独页面使用meta的时候，他不是直接修改，而是插在下面覆盖上面的meta进行修改。 1、安装 npm install vue-meta --save 2、在ma...
Vue的基本使用（二）
喃灬疯的博客
03-28 316
​ 这里使用使用一个简单的案例来演示，各种形式下的实现形式，进而来展现。 1.2、姓名案例-method实现 1.3、姓名案例-计算属性实现 这个案例中没有调用。 2、监视（侦听）属性 这里同样的用一个案例来演示的好处。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GjpWTzSi-1679923029855)(Vue学习/image-20230312153907198.png)]
vue2如何在html模板里重新定义变量
wzp20092009的博客
08-05 1973
在vue的循环嵌套中，有时候多重循环之后会出现很长的嵌套变量取值，然后模板中使用多有不便。
探索Vue-head：动态管理HTML头部信息的高效工具
最新发布
gitblog_00022的博客
12-03 592
在前端开发中，优化网页元数据（如标题、描述和图标）的管理和更新是一项重要的任务。为此，我们向您推荐一款小巧而强大的Vue.js插件——[Vue-head](https://github.com/ktquez/vue-head)。这款插件能以简单直观的方式帮助您操作页面<head>标签内的元素。 ## 项目介绍 Vue-head是受[HEAD](https://github.com/joshbu
vue/html中的head中三行关键代码
zumengbuting的博客
05-23 212
没有的话会导致页面某些内容不显示，格式不能完全显示出来，不能正确跳转等等。
基于vue-advanced-chat组件自义定聊天（socket.io+vue2）
beekim的博客
12-21 2675
通过上一篇文章我们已经在vue-advanced-chat中替换掉原有的firebase，用socket.io简单的实现了聊天功能。现在需要自义定该组件，改造成我们想要的样子：先将比较重要的几块提取出来。
Vue内部指令 v-text & v-html
01-20
在Vue中，`v-text`和`v-html`是两个内部指令，用于处理文本内容的显示，尤其是在处理动态数据和HTML安全方面。让我们深入了解一下这两个指令。 ### 1. 大括号表达式 `{{ }}` 的限制 在Vue中，我们通常使用双大括号...
两小时从零学会vue-admin-template框架
drhrht的博客
03-06 8638
一、vue-admin-template 1.项目简介 官网：https://github.com/PanJiaChen vue-element-admin是含有丰富的组件，vue-admin-template是一个基础的单页面应用的框架，适合在vue-admin-template上二次开发，开发需要的组件就可以直接的从vue-element-admin里面拷贝上去。适合于后台管理的中小型项目，内部的架构非常的完善，简单易上手。 1.2下载项目 vue-element-admin 官网 vue-admi
vue-head：管理head标签的元信息，一种简单的方法
02-06
头 操作head标签的元信息，一种简单的方法由激励 有关旧版本的语法， 用法 通过CDN ... < script src =" https://cdnjs.cloudflare.com/ajax/libs/vue/*version*/vue.min.js " > </ script > < script src =" https://cdnjs.cloudflare.com/ajax/libs/vue-router/*version*/vue-router.min.js " > </ script > < script src =" https://cdn.rawgit.com/ktque
vue head（vue-meta编写页面head信息）
林雨的博客
08-10 5753
vue-meta vue-meta可以为单个页面设置head信息 模块安装 npm install vue-meta --save main.js中注册并使用vue-meta模块 import Meta from 'vue-meta' Vue.use(Meta) //注册使用vue-meta模块 使用vue-meta模块 <script> metaInfo: { title: 'vue-meta设计', //设计页面标题 }, </script&g
vue 设置头文件
u011927449的博客
11-23 1250
vue的头文件是在index.html文件中设置的，毕竟vue的入口 先说一下标签页的名字： 就是这个名字的设置，要想每个标签页的名字都不一样，需要做以下这三步： 1. 首先，在index.htm...
vue 设置head_第四章：Vue实例
weixin_28717969的博客
01-31 2445
要开始使用VueJS，我们需要创建Vue实例，称为根Vue Instance。句法varapp=newVue({//options})让我们看一个示例，以了解需要成为Vue构造函数一部分的内容。<html><head><title>VueJsInstancetitle><scripttype...
vue 相关
twenj1616的博客
04-28 379
hello world 知识点：hello world 结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
vue 基础 —— html版的 Vue 入门基础
猎人在吃肉
09-16 4938
数据驱动视图数据的变化会驱动视图自动更新好处：程序员只把数据维护好，那么页面结构会被Vue自动渲染出来。双向数据绑定js数据的变化，会被自动渲染到页面上页面上表单采集的数据发生变化的时候，会被Vue自动获取，并更新到js数据中。 2、vue指令 **指令（Directives）**是Vue为开发者提供的 模板语法，用于 辅助开发者渲染页面的基本结构。Vue中的指令按照不同的用途，可分为6大类：指令是Vue开发中最基础、最常吸入、最简单的知识点。内容渲染指令 用来辅助开发者 渲染 DOM 元素的文本内容
前端学习（259）:flex-flow
歌谣的博客
12-30 584
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
vue布局
fivestar2009的博客
10-02 1160
vue 布局
vue切换页面 动态设置meta和title标签内容
热门推荐
Kris的博客
01-08 1万+
pc端项目中为了优化SEO搜索，要求首页和内容页的title/keywords/description 保持不一样 用vue+webpack搭建的项目 思路： 1）由于vue是单页面应用，index.html入口文件&amp;amp;amp;lt; head &amp;amp;amp;gt;标签只有一个，那么只能通过判断切换的路由 2）判断切换路由 需要在main.js全局js中 使用 router.beforeEach，to中可以获得将要...
vue项目中使用docker环境变量，详细的代码处理
07-16
在 Vue 项目中使用 Docker 环境变量，可以通过构建时注入环境变量并在运行时通过 HTML 的 `dataset` 来访问这些变量。Docker 构建过程中可以使用 `-e` 参数传递环境变量，并在容器启动时将这些变量注入到前端应用中。 ### 1. 在 Docker 构建和运行时设置环境变量 在构建 Docker 镜像时，可以使用 `--build-arg` 来传递构建时的环境变量，而在运行容器时，使用 `-e` 参数来设置运行时环境变量。例如： ```bash docker build --build-arg VUE_APP_BASE_API='http://api.example.com' -t vue-app . docker run -p 8080:80 -e ENV='production' -d vue-app ``` 其中 `VUE_APP_BASE_API` 是一个构建时变量，而 `ENV` 是运行时变量，可以在容器中被访问[^1]。 ### 2. 在 Vue 应用中读取环境变量 为了在 Vue 应用中动态获取这些变量，可以在构建阶段将变量写入 HTML 文件的 `data-*` 属性中，并在运行时通过 JavaScript 读取。 #### 修改 `index.html` 文件： ```html <!DOCTYPE html> <html data-base-url="process.env.VUE_APP_BASE_API"> <head> <meta charset="utf-8"> <title>Vue App</title> </head> <body> <div id="app"></div> </body> </html> ``` 在构建时，`VUE_APP_BASE_API` 的值会被替换为实际的 URL。 #### 在 `main.js` 中读取该变量： ```javascript const baseUrl = document.querySelector('html').dataset.baseUrl || process.env.VUE_APP_BASE_API; Vue.prototype.$baseUrl = baseUrl; new Vue({ router, store, render: h => h(App) }).$mount('#app'); ``` 这样，在 Vue 组件中就可以通过 `this.$baseUrl` 访问 API 地址[^5]。 ### 3. 使用 Nginx 模板动态注入变量（可选） 如果希望在运行时动态注入环境变量，而不是在构建时固定变量值，可以使用 Nginx 的 `sub_filter` 功能或模板引擎来实现。例如，在 Nginx 配置中使用环境变量替换： ```nginx server { listen 80; server_name localhost; location / { root /usr/share/nginx/html; index index.html; sub_filter 'VUE_APP_BASE_API' $env_base_api; sub_filter_once off; } } ``` 然后在运行容器时传入变量： ```bash docker run -p 8080:80 -e env_base_api='http://api.example.com' -d nginx_vue ``` 此方法允许在不重新构建镜像的情况下更改 API 地址[^1]。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qq_1075654056

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值