vue3+vite项目在html中输出环境变量

已于 2023-06-08 14:04:56 修改
阅读量3.2k 收藏 1
点赞数 4
分类专栏： vue js 文章标签： html 前端 vue.js vue3 vite
于 2023-06-08 13:58:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_41695090/article/details/131105902
版权
js 同时被 2 个专栏收录
16 篇文章 0 订阅
订阅专栏
vue
5 篇文章 0 订阅
订阅专栏

有两种办法

方法一

首先在vite.config.ts中进行配置要插入的变量内容，结合createHtmlPlugin插件

import { createHtmlPlugin } from 'vite-plugin-html';
import type { PluginOption } from 'vite';
  const htmlPlugin: PluginOption[] = createHtmlPlugin({
    minify: isBuild,
    inject: {
      // Inject data into ejs template
      data: {
        title: VITE_GLOB_APP_TITLE
        injectScript: `<script type="text/javascript" src="https://agent-gate-${VITE_GLOB_TR_REGION == '2'?'test-':''}${VITE_GLOB_TR_REGION}.cloud/js/ctilinks.js"></script>`
      },
      }
    });
    return htmlPlugin;

在这里title、injectScript就是要插入的变量名；
然后在html中插入

<!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" />
    <meta
      content="xxx"
      name="keywords" />
    <link rel="icon" href="group.ico"/>
    <title><%= title %></title>
  </head>

  <body>
    <div id="app"></div>
    <%- injectScript %>
    <script type="module" src="./src/main.ts"></script>
  </body>
</html>

方法二

Vite 本身支持在 HTML 文件中替换环境变量。import.meta.env 中的任何属性都可以通过特殊的 %ENV_NAME% 语法在 HTML 文件中使用：

<h1>Vite is running in %MODE%</h1>
<p>Using data from %VITE_API_URL%</p>

注意点：⚠️如果import.meta.env上不存在某个属性变量名，例如：VITE_NAME
在html，会表现为被忽略，而不进行替换。
但是在js，会查找不到，会被替换为 undefined。

over!

草莓不爱吃白菜
关注
  • 4
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vite 使用 env 环境变量
qq_35411656的博客
01-21 3980
vite 使用 env 环境变量1. 环境变量的理解1.1. .env.dev-sit文件1.2. .env.dev-prod文件1.2. 配置package.json, scripts下新增以下代码2. 环境变量的使用2.1. index.html中使用 1. 环境变量的理解 叽里呱啦一下，主要目的是学习vue3 + vite来搭建一个后台管理系统的项目。 认知：顾名思义就是变量在不同客户端环境下的不同表现。 场景：多人开发、多版本开发等。 1.1. .env.dev-sit文件 根目录下新建 .e
vue3+vite+qiankun+monorepo框架
08-03
vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+...
vue3+vite 在html文件中添加环境变量
一缕阳光@的博客
07-04 1万+
vue3加vite添加环境变量
在vue3+vite中实现index.html的模板变量使用
SuperBugwcx的博客
10-08 1200
一般适合vue打包后将index.html用其他的程序模板渲染一些seo信息的用途。假设index.html需要使用titiel 可以写 <%= title %>然后再vite.config.js中使用。
vite获取所有环境变量(env)
qq_41974199的博客
06-10 549
默认情况下，vite只获取以VITE_为前缀的环境变量。为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码,使用loadEnv读取所有环境变量。
Vite配置环境变量以及动态更新html数据
最新发布
weixin_51431465的博客
07-01 349
【代码】Vite配置环境变量以及动态更新html数据。
【Vite】Vite配置文件中的插件学习
Triumph_light的博客
11-07 3265
vite会在生命周期的不同阶段去调用不同的插件以达到不同的目的。
vite-plugin-html 使用方法文档记录
SilenceJude的博客
11-10 3785
默认会向 index.html 注入。文件的内容，类似 vite 的。
vue3 + vite 多项目多模块打包
百变魔旅
03-31 7027
本示例基于vite-plugin-html插件，实现多个独立项目共存，共享组件和依赖，运行、打包互不干扰。
【魔改版vite-plugin-html】超好用的vite HTML模板插件！
warmbook的博客
01-27 4969
支持多页面、模板复用、GET参数匹配页面的HTML模板插件vite-plugin-html
vu3 vite 项目title使用环境变量evn
reembarkation的博客
11-22 356
vu3 vite 项目title使用环境变量evn
vue3+vite+antd 后台管理系统基础模板
02-06
在Vue3项目中，通过适配器可以很好地与Vue3集成，提供一套美观、一致的设计风格和丰富的交互组件，如表格、按钮、输入框等，大大简化了前端开发的工作。 这个"vue3+vite+antd 后台管理系统基础模板"是一个用于快速...
vue3+vite2+ts+vant3 项目demo
04-16
此项目 按照大佬文章 一步步学习搭建 https://juejin.cn/post/7036745610954801166?share_token=5dd94aae-bed2-4733-93ac-306118376443；感谢大佬
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
vue3+ts+vite+router+vuex+api请求封装
12-29
在Vue3项目中，TS提供了更好的类型检查和代码提示，使得大型项目的协作变得更加顺畅。 3. Vite：由Vue.js作者尤雨溪开发的新型构建工具，它利用了ES模块的原生特性，实现了快速的热更新和开发服务器启动，极大地...
基于vite搭建的vue3项目中如何引用环境变量
SilenceJude的博客
12-13 2713
注意，无论是方法1还是方法2，只有NODE_ENV，BASE_URL和以VUE_APP_开头的变量才能通过静态地嵌入到客户端侧的代码中。1、直接在vue.config.js中定义如这里我们可以在vue.congif.js中定义：2、在.env 文件中定义。1、直接在vite.config.js中定义可以直接在vite.config.js中定义环境变量。2、在.env 文件中定义。同vue/cli，只是这里 将VUE_APP_XXXX 换成了 VITE_XXXX_XXXXX。
vite插件替换 html 中的自定义环境变量，自动添加 html 编译后的环境注释
SAXX2的博客
11-22 629
/环境注释函数，返回字符串。indexPath?//index.html文件目录 默认为项目根目录。//环境变量文件目录 默认为项目根目录。: boolean;//是否使用默认环境注释。项目名称：@zrcode/vite-zero-env-plugin。发布日期：2023/11/9 15:35:17。
Vite配置环境变量
热门推荐
L_yvpeng的博客
03-10 1万+
Vite配置代码环境变量和 Vue2 的配置差不多，都是依靠 .env 文件夹来实现 详情可到 Vite 官网的环境配置里了解：环境变量和模式 {#env-variables-and-modes} | Vite中文网 一、在src同级下创建.env.production生产模式和.env.development开发模式两个文件夹 ​​​​​​​​​​​​​​​​​​​​​ 二、文件夹内部分别写入...
Vite处理html模板插件之vite-plugin-html
weixin_42257731的博客
02-16 8474
背景：项目中需要使用模板html动态处理比如 icon 、title。我的项目里是需要在不同的打包指令下，打包的结果中index.html 中title 和 icon都不一致。之前的项目使用的是插件。安装该插件的使用需要注意你项目的webpack版本，安装对应的版本插件。本次因为项目是vite项目，所以采用插件。本文作为使用记录。结尾还有个疑问一直没有解决，欢迎大神留言解答一下。提示：以下是本篇文章正文内容，下面案例可供参考。
怎么在ts环境的vite创建的vue3项目里使用cesium导入glb文件
06-01
在 TypeScript 环境的 Vite 创建的 Vue 3 项目中使用 Cesium 并导入 `.glb` 文件，你可以按照以下步骤进行操作： 1. 安装 Cesium： ``` npm install cesium --save ``` 2. 在 `index.html` 中引入 Cesium 的 CSS 和 JavaScript 文件： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Vue 3 App</title> <link href="./node_modules/cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet" /> <script type="module" src="./node_modules/cesium/Build/Cesium/Cesium.js"></script> </head> <body> <div id="app"></div> <script src="/src/main.ts" type="module"></script> </body> </html> ``` 3. 修改 `main.ts` 文件，导入并使用 Cesium： ```typescript import { createApp } from 'vue'; import App from './App.vue'; import * as Cesium from 'cesium'; const app = createApp(App); app.config.globalProperties.$Cesium = Cesium; app.mount('#app'); ``` 4. 在你的组件中，通过 `$Cesium` 对象来创建 `Viewer`，并使用 `Entity` 加载 `.glb` 文件： ```vue <template> <div id="cesiumContainer"></div> </template> <script lang="ts"> import { defineComponent, onMounted } from 'vue'; export default defineComponent({ name: 'Cesium', setup() { onMounted(() => { const viewer = new $Cesium.Viewer('cesiumContainer'); viewer.entities.add({ name: 'Model', position: $Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706), model: { uri: '/model.glb', }, }); }); return {}; }, }); </script> ``` 这样，你就可以在 TypeScript 环境的 Vite 创建的 Vue 3 项目中使用 Cesium 并导入 `.glb` 文件了。需要注意的是，在使用 `Entity` 加载 `.glb` 文件时，你需要提供相应文件的路径。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值