CODEWITHSUNDEEP
javascripthtmlvue.jsvite
Evg127
Evg127

Reputation: 73

How to use Env Variables in a Vue app's index.html file?

I have an index file:

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required Meta -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Title For This Document -->
    <title> Html Template</title>
    <!-- Favicon For This Document -->
    <link rel="shortcut icon" href="src/assets/images/logo/favicon-32x32.png" type="image/x-icon">
    <!-- Bootstrap 5 Css -->
    <link rel="stylesheet" href="src/assets/css/bootstrap.5.1.1.min.css">
    <!-- Google fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    <!-- FlatIcon Css -->
    <link rel="stylesheet" href="src/assets/fonts/flaticon.css">

    <!-- Slick Slider Css -->
    <link rel="stylesheet" href="src/assets/css/plugin/slick.css">
    <!--  Ui Tabs Css -->
    <link rel="stylesheet" href="src/assets/css/plugin/jquery-ui.min.css">
    <!-- Magnific-popup Css -->
    <link rel="stylesheet" href="src/assets/css/plugin/magnific-popup.css">
    <!-- Nice Select Css -->
    <link rel="stylesheet" href="src/assets/css/plugin/nice-select.v1.0.css">
    <!-- Animate Css -->
    <link rel="stylesheet" href="src/assets/css/plugin/animate.css">
    <!-- Style Css -->
    <link rel="stylesheet" href="src/assets/css/style.css">

</head>

<body>
<!--===scroll bottom to top===-->
<a href="#0" class="scrollToTop"><i class="flaticon-up-arrow"></i></a>
<!--===scroll bottom to top===-->
<div id="app"></div>
<!--==== Js Scripts Start ====-->
<!-- Jquery v3.6.0 Js -->

<script src="src/assets/js/jquery.v3.6.0.min.js"></script> <!-- Popper v2.9.3 Js -->
<script src="src/assets/js/popper.v2.9.3.min.js"></script> <!-- Bootstrap v5.1.1 js -->
<script src="src/assets/js/bootstrap.v5.1.1.min.js"></script> <!-- jquery ui js -->
<script src="src/assets/js/plugin/jquery-ui.min.js"></script> <!-- Parallax js -->
<script src="src/assets/js/plugin/jarallax.min.js"></script> <!-- Isotope js -->
<script src="src/assets/js/plugin/isotope.js"></script> <!-- Slick Slider Js -->
<script src="src/assets/js/plugin/slick.min.js"></script> <!-- magnific-popup v2.3.4 Js -->
<script src="src/assets/js/plugin/jquery.magnific-popup.min.js"></script> <!-- Tweenmax v2.3.4 Js -->
<script src="src/assets/js/plugin/tweenMax.min.js"></script> <!-- Nice Select Js -->
<script src="src/assets/js/plugin/nice-select.v1.0.min.js"></script> <!-- Wow js -->
<script src="src/assets/js/plugin/wow.v1.3.0.min.js"></script> <!-- Wow js -->
<script src="src/assets/js/plugin/jquery.countdown.min.js"></script> <!-- Main js -->
<script src="src/assets/js/main.js"></script>
<!--==== Js Scripts End ====-->
<script type="module" src="/src/main.js"></script>
</body>

</html>

I have a Vue app:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'


const app = createApp(App)

app.use(router)
app.config.globalProperties.axios = axios
app.mount('#app')

And I'm using vite, not CLI.

I want to use my env variables in the index file(not in js script tags) from the .env file How to implement it? I read the vue documentation, but it it doesn't have any examples how to use it in html code. I tried "import.meta.env" here:

<div id="app">{{import.meta.env.DOMAIN_NAME}}</div>

I tried to use it here:

<meta name="DOMAIN_NAME" value={import.meta.env.DOMAIN_NAME}>

, but it didn't work like this... I think it is not correct syntax at least...

Upvotes: 2

Views: 2425

Answers (3)

Abhishek Raj
Abhishek Raj

Reputation: 490

I have not found any solution without any plugin.

So finally, I used vite-plugin-html-env npm package to fix this issue.

Link of the npm package: vite-plugin-html-env

Upvotes: 0

Rupert Angermeier
Rupert Angermeier

Reputation: 1015

Replacing environment variables has been added in Vite 4.2.0, see https://vitejs.dev/guide/env-and-mode.html#html-env-replacement

Add this to your .env/.env.dev/... file:

VITE_DOMAIN_NAME = https://your-domain

Or the following to your vite.conf.js

process.env.VITE_DOMAIN_NAME = 'https://your-domain'

Then you can replace it in your index.html like this:

<div id="app">%VITE_DOMAIN_NAME%</div>

You have to prefix your environment variables with VITE_ so they become exposed in your code.

Upvotes: 4

Taha Azzabi
Taha Azzabi

Reputation: 2570

I think what you are looking for: is how to modify the metaData (the tags of the Head part), I suggest you use the vue-meta plugin which will allow you the META DOMAIN_NAME tag, then in your main.js you can define :

Vue.use(VueMeta, {
  DOMAIN_NAME: VUE_APP_DOMAIN_NAME
})

Everything is well explained here : https://www.digitalocean.com/community/tutorials/vuejs-vue-meta

Otherwise I think there is a syntax error in your code, the correct syntax is

<meta name="DOMAIN_NAME" value="<%= import.meta.env.DOMAIN_NAME %>">

Please this index.html file generated by Vuejs

enter image description here

Upvotes: 1

Related Questions