How to use Vue global variables in html head section?

I am using Vue version 2.6.11 in my website. I set some global variables according to this question in my src/main.js file as follow:

/* global variables */
Vue.prototype.$frontUrl = "http://localhost:8080/";
Vue.prototype.$backUrl = "http://localhost:3500/";

That works fine if I use them in my Vue views or components like this.$backUrl in this form tag:

<form novalidate class="row pl-md-5" :action="this.$backUrl + 'sql'" method="post"> 
<!-- some input tags ... -->
</form>

But I want to use them in my public/index.html file as the code below:

<!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>

It does not work. It does not give me any error but don't use Vue global variable value. If I see my page source in browsers, It shows me <meta name="image" property="og:image" :content='this.$backUrl + "img/images/portfolio-preview.png"'>. Could anyone please help me how to use those variables in my index.html head section?

Solution

I finally found a solution with the help of Vue CLI Environment Variables. I saved my global variables values in a .env file in the root directory of project like the code below:

.env file:

VUE_APP_BACK_URL=http://localhost:3500/

Then I changed my src/main.js file that contains global variables like the code below:

main.js:

Vue.prototype.$backUrl = process.env.VUE_APP_BACK_URL;

So that I don't need to change other components and views that used this global variable. Finally for html head tag I used variables defined in .env file directly as could be seen in the code below:

<!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>