我在我的网站中使用 Vue 版本
2.6.11src/main.js文件中的这个问题设置了一些全局变量，如下所示：
/* global variables */
Vue.prototype.$frontUrl = "http://localhost:8080/";
Vue.prototype.$backUrl = "http://localhost:3500/";
如果我在我的 Vue views 或 components 中使用它们，就像这个表单标签中的
this.$backUrl<form novalidate class="row pl-md-5" :action="this.$backUrl + 'sql'" method="post">
<!-- some input tags ... -->
</form>
但我想在我的
public/index.html<!DOCTYPE html>
<html>
<head>
<!-- og meta tags -->
<meta name="type" property="og:type" content="website">
<meta name="image" property="og:image" :content='this.$backUrl + "img/images/portfolio-preview.png"'>
<meta name="url" property="og:url" content="">
</head>
</html>
它不起作用。它不会给我任何错误，但不使用 Vue 全局变量值。如果我在浏览器中看到我的页面源代码，它会显示给我
<meta name="image" property="og:image" :content='this.$backUrl + "img/images/portfolio-preview.png"'>我解决了这个问题，感谢 Joshua Bemenderfer 的 如何使用 Vue.js 和 vue-router 更新页面标题和元数据，我从中借用了一些代码：
创建定义文件definitions.js
export default {
urlTest: "localhost:8080"
}
为了保持代码逻辑，您需要更改全局变量定义，如下所示：
import def from '../definitions.js'
Vue.prototype.$frontUrl = def.urlTest
//Only if you really need to store as a global
然后在您定义路径的 vue-router 上：
import HomeView from '../views/HomeView.vue'
import definitions from '../config/definitions.js'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [{
path: '/',
meta: {
title: "Home",
metaTags: [{
//<meta name="image" property="og:image" :content='this.$backUrl + "img/images/portfolio-preview.png"'>
name: 'image',
property: 'og:image',
content: definitions.urlTest + "/img/images/portfolio-preview.png"
}]
},
name: 'home',
component: HomeView
}]
})
// This callback runs before every route change, including on page load.
router.beforeEach((to, from, next) => {
// This goes through the matched routes from last to first, finding the closest route with a title.
// e.g., if we have `/some/deep/nested/route` and `/some`, `/deep`, and `/nested` have titles,
// `/nested`'s will be chosen.
const nearestWithTitle = to.matched.slice().reverse().find(r => r.meta && r.meta.title);
// Find the nearest route element with meta tags.
const nearestWithMeta = to.matched.slice().reverse().find(r => r.meta && r.meta.metaTags);
const previousNearestWithMeta = from.matched.slice().reverse().find(r => r.meta && r.meta.metaTags);
// If a route with a title was found, set the document (page) title to that value.
if (nearestWithTitle) {
document.title = nearestWithTitle.meta.title;
} else if (previousNearestWithMeta) {
document.title = previousNearestWithMeta.meta.title;
}
// Remove any stale meta tags from the document using the key attribute we set below.
Array.from(document.querySelectorAll('[data-vue-router-controlled]')).map(el => el.parentNode.removeChild(el));
// Skip rendering meta tags if there are none.
if (!nearestWithMeta) return next();
// Turn the meta tag definitions into actual elements in the head.
nearestWithMeta.meta.metaTags.map(tagDef => {
const tag = document.createElement('meta');
Object.keys(tagDef).forEach(key => {
tag.setAttribute(key, tagDef[key]);
});
// We use this to track which meta tags we create so we don't interfere with other ones.
tag.setAttribute('data-vue-router-controlled', '');
return tag;
})
// Add the meta tags to the document head.
.forEach(tag => document.head.appendChild(tag));
next();
});
这是 Vue3 的，但方法和路由器路径定义具有相同的格式。如需更详细的说明，请查看顶部的链接。
我终于在Vue CLI环境变量的帮助下找到了解决方案。我将全局变量值保存在项目根目录下的
.env.env 文件：
VUE_APP_BACK_URL=http://localhost:3500/
然后我更改了包含全局变量的
src/main.jsmain.js：
Vue.prototype.$backUrl = process.env.VUE_APP_BACK_URL;
这样我就不需要更改使用此全局变量的其他组件和视图。最后，对于 html head 标签，我使用了
.env<!DOCTYPE html>
<html>
<head>
<!-- og meta tags -->
<meta name="type" property="og:type" content="website">
<meta name="image" property="og:image" content='<%= process.env.VUE_APP_BACK_URL + "img/images/portfolio-preview.png"%>'>
<meta name="url" property="og:url" content="<%= process.env.VUE_APP_BACK_URL %>">
</head>
</html>