vue項目index.html中使用環(huán)境變量的代碼示例

更新時間：2024年02月26日 08:25:51 作者：下雪天的夏風

在Vue3中使用環(huán)境變量的方式與Vue2基本相同,下面這篇文章主要給大家介紹了關(guān)于vue項目index.html中使用環(huán)境變量的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

1，Vue-CLI（Webpack）

<!DOCTYPE html>
<html lang="">
  <head>
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow"  />
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <div id="app"></div>
    <script>
      console.log('<%= NODE_ENV %>')
      console.log('<%= BASE_URL %>')
      console.log('<%= VUE_APP_CONTEXT %>')
    </script>
  </body>
</html>

在 vue-cli 創(chuàng)建的項目中，index.html 使用環(huán)境變量時通過 <%= xxx %>。參考
除了 VUE_APP_* 變量之外，始終可使用的變量有2個 NODE_ENV 和 BASE_URL。參考
vue-cli 內(nèi)置了 htmlWebpackPlugin 插件，其中 htmlWebpackPlugin.options.title 默認取的是 package.json 中的 name 字段。

2，Vite

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>%MODE%</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
    <script>
      console.log('%MODE%')
    </script>
    <script type="module">
      console.log(import.meta.env.MODE)
    </script>
  </body>
</html>

編譯結(jié)果

<script>console.log('development')</script>
<script type="module" src="/index.html?html-proxy&amp;index=0.js"></script>

vite 創(chuàng)建的項目中，index.html 使用環(huán)境變量有2種方式：

通過 %xxx%（參考）
在 <script type="module"> 中通過 es6 的模塊語法，使用 Vite 創(chuàng)建的 import.meta.env 對象上暴露的環(huán)境變量。

始終可使用的變量有4個。參考

以上。

總結(jié)

到此這篇關(guān)于vue項目index.html中使用環(huán)境變量的文章就介紹到這了,更多相關(guān)vue index.html使用環(huán)境變量內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue實現(xiàn)一個簡單的Grid拖拽布局
這篇文章主要為大家詳細介紹了如何利用vue實現(xiàn)一個簡單的Grid拖拽布局,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
2023-12-12
VUE利用vuex模擬實現(xiàn)新聞點贊功能實例
本篇文章主要介紹了VUE利用vuex模擬實現(xiàn)新聞點贊功能實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-06-06
在vue中添加Echarts圖表的基本使用教程
雖然老早就看過很多echarts的例子，但自己接觸的項目中一直都沒有真正用到過，直到最近才開始真正使用，下面這篇文章主要給大家介紹了關(guān)于在vue中添加Echarts圖表的基本使用教程，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下。
2017-11-11
Vue 實現(xiàn)穿梭框功能的詳細代碼
本文給大家介紹Vue 實現(xiàn)穿梭框功能，代碼分為css，html和js代碼，代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧
2021-10-10
vue監(jiān)視器@Watch創(chuàng)建執(zhí)行immediate方式
這篇文章主要介紹了vue監(jiān)視器@Watch創(chuàng)建執(zhí)行immediate方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-08-08
VUE3+vite項目中動態(tài)引入組件與異步組件的詳細實例
在做vue3項目中時,每次使用都需要先進行引入,下面這篇文章主要給大家介紹了關(guān)于VUE3+vite項目中動態(tài)引入組件與異步組件的相關(guān)資料,需要的朋友可以參考下
2022-09-09
uniapp開發(fā)打包成H5部署到服務器的詳細步驟
前端使用uniapp開發(fā)項目完成后，需要將頁面打包，生成H5的靜態(tài)文件，部署在服務器上這樣通過服務器鏈接地址，直接可以在手機上點開來訪問，下面小編給大家講解uniapp開發(fā)打包成H5部署到服務器的步驟，感興趣的朋友一起看看吧
2022-11-11
解決vue 按鈕多次點擊重復提交數(shù)據(jù)問題
這篇文章主要介紹了vue 按鈕多次點擊重復提交數(shù)據(jù)的問題,本文通過實例結(jié)合的形式給大家介紹的非常詳細，需要的朋友可以參考下
2018-05-05
Vue實現(xiàn)contenteditable元素雙向綁定的方法詳解
contenteditable是所有HTML元素都有的枚舉屬性，表示元素是否可以被用戶編輯。本文將詳細介紹如何實現(xiàn)contenteditable元素的雙向綁定，需要的可以參考一下
2022-05-05
Ant?Design?Vue中的table與pagination的聯(lián)合使用方式
這篇文章主要介紹了Ant?Design?Vue中的table與pagination的聯(lián)合使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10