vue-cli的index.html中使用环境变量

最新推荐文章于 2024-08-07 10:44:47 发布
最新推荐文章于 2024-08-07 10:44:47 发布
阅读量1w 收藏 3
点赞数 2
分类专栏： vue 文章标签： vue-cli 环境变量 index.html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ltf_1225/article/details/103816073
版权

项目中使用了公司定义的统一头部文件，需要引入header.js和header.css。负责人希望各个环境引入各自的js和css。

当时第一反应是process，但是在index.html里打印报错，所以最初是根据域名去判断，然后动态修改src和href值。感觉很麻烦。

翻阅cli官方文档后看到了这样一段话。

遂使用了一下，发现是可以的，具体写法如下：

.env.xxx环境文件中定义变量：

 VUE_APP_APIURL = "http://test.xxxx.com.cn"

 

然后html文件中使用

<link rel="stylesheet" href="<%= VUE_APP_APIURL %>/header/head.css">

 

前端开发终生学习者
关注
专栏目录
vue index.html环境变量,vue-cli环境变量与模式
weixin_32858247的博客
07-04 1281
vue-cli环境变量与模式模式环境变量环境文件加载优先级示例：Staging 模式在客户端侧代码中使用环境变量public/index.html只在本地有效的变量推荐阅读你越是认真生活，你的生活就会越美好——弗兰克·劳埃德·莱特《人生果实》经典语录vue-cli3.0移除了配置文件目录： config和build文件夹。改为.env自定义配置环境变量和模式日常工作中，主要用来区分本地开发环境，测...
vue index.html环境变量,Vue环境变量的配置
weixin_36182568的博客
07-04 1473
一看就懂的vue环境变量配置这是基于cli3.x版本的环境变量配置指南。没有过多复杂的介绍，只有极简的实用配置。旨在给需要的朋友提供帮助以及自己温故知新，真正一看就会懂，懂了就能用。项目开发过程中，至少会经历开发环境、测试环境和生产环境(即正式环境)三个阶段。不同阶段请求的状态(如接口地址等)不尽相同，若手动切换接口地址是相当繁琐且易出错的。于是环境变量配置的需求就应运而生，我们只需做简单的配置，...
vue - vue的index.html中获取环境变量和业务判断
qq_43886365的博客
04-20 8086
vue的index.html中获取环境变量和业务判断
vite怎么判断当前环境是本地环境还是测试环境(两种常用方式)
最新发布
m0_46365130的博客
08-07 575
在 Vite 项目中，你可以通过环境变量来判断当前运行的环境是本地开发环境还是测试环境。Vite 默认提供了 import.meta.env.MODE 变量，它会根据你的 mode 来设置相应的环境值。
vue 项目 index.html 中使用环境变量
qq_40147756的博客
12-23 3025
vue-cli 和 vite 创建的 vue 项目中，使用环境变量的方式
vue2x版本index.html种获取环境变量
momo_mom177的博客
02-11 5652
在vue文件中可以直接用 process.env.VUE_APP_xxx 获取到 自定义环境变量， 但是在index.html中只能使用<%= VUE_APP_xxx %> 字符串获取到，之前看到网上说的直接写在html中直接写：如下图，但是内部也获取不到环境变量process <% if (process.env.VUE_APP_environment === 'production' ) { %> <script> // js 代码 .
vue index.html环境变量,vue项目的环境变量
weixin_32187075的博客
06-19 845
关于项目中环境变量的总结背景项目环境通常分为开发环境，测试环境，线上环境由于每一个环境的接口域名、webpack 配置都是不一样的，因此在打包构建时，咱们须要区分这些环境，这时就用到了环境变量在工做中使用到了两种方法来区分，下面将这两种方式一一列举出来技术框架是vue-cli@2.xjavascript首先看下下面的解释，后面会用到< process 对象是一个全局变量，提供 Node.js...
Vue-CLI 3.X 部署项目至生产服务器的方法
10-17
通过在项目根目录下创建 `deploy/products.js` 文件来读取 `.env` 文件中的环境变量，并且定义多个服务器账号。根据 `VUE_APP_SERVER_ID` 的值来确定当前部署的服务器账号，并将其导出。这里涉及到解析 `.env` 文件...
vue-cli脚手架config目录下index.js配置文件的方法
10-18
通过以上配置，开发者可以灵活地调整 Vue CLI 项目以满足特定需求，如更改端口、自定义静态资源路径、设置环境变量、开启 GZIP 压缩等。了解并掌握这些配置选项，有助于提高开发效率和项目性能。在实际开发过程中，...
vue-cli 3.x 项目打包配置-vue.config.js
pamerely的博客
04-14 4120
这里写自定义目录标题前言npm run build配置-package.json.env.dev文件.env.prod文件vue配置文件-vue.config.js路由改成hash模式-router.js插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图...
详解vue-cli脚手架build目录中的dev-server.js配置文件
10-18
通过process.env.PORT获取环境变量中设定的端口号，如果未设置，则使用config文件中配置的默认端口（通常为8080）。这允许开发者在不同环境中有更多的灵活性。 自动打开浏览器的选项也是通过环境变量来配置，如果未...
vue-cli在index.html判断环境变量加载不同代码
lihefei_coder的博客
04-08 4073
index.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
vue index.html环境变量,Vue环境变量和模式
weixin_36111561的博客
06-19 730
Vue环境变量和模式我最开始使用vue的判断环境的方法是let BASE_URL = process.env.NODE_ENV == "development" ? "http:/localhost" : "xxx"在这种情况下，需要先判断它的编译环境，进而根据环境适用对应的值。如果只有一个地方的变量跟环境有关，情况还好。但是若有多个，则需要复制多个判断或者封装成一个方法。但也只能使用于两个环境，...
vue-cli的index.html中使用环境变量(转)
JXMaker
07-13 3453
项目中使用了公司定义的统一头部文件，需要引入header.js和header.css。负责人希望各个环境引入各自的js和css。 当时第一反应是process，但是在index.html里打印报错，所以最初是根据域名去判断，然后动态修改src和href值。感觉很麻烦。 翻阅cli官方文档后看到了这样一段话。 遂使用了一下，发现是可以的，具体写法如下： .env.xxx环境文件中定义变量： VUE_APP_APIURL = “http://test.xxxx.com.cn” 然后html文件中使用 ———
vue环境变量
weixin_42666092的博客
06-11 5244
1.mode 模式 设置后， --mode production,是在打包后生成的文件中启动触发， --mode development 是在开发环境下启动触发触发 模式设置，在package.json 的 scripts属性中设置的命令 development(开发环境) 模式用于 vue-cli-service serve test(测试) 模式用于 vue-cli-service test:unit production(生产环境) 模式用于 vue-cli-service build 和 vu
vue3 获取环境变量中的值
哈
05-17 580
对象来访问环境变量。这些变量应该在项目根目录中的 .env 文件或者相应的环境文件（.env.local, .env.development, .env.production 等）中定义。，并在这些文件中设置不同的值。当运行应用时，Vue CLI 会根据选择的模式（development 或 production）自动选择合适的文件。如果需要在不同的环境中有不同的值，可以创建多个环境文件，如。在 Vue 3 中，可以使用。
VITE+VUE3无法获取环境变量问题
Lou_Lan的博客
09-22 5085
使用vue cli创建的vue项目我们获取环境变量的方式和vite中不一样
vue自定义环境 获取环境变量
weixin_45441173的博客
02-02 2597
vue自定义环境 获取环境变量
vue3中在index.html使用环境变量
05-30
在Vue3中，使用环境变量的方式与Vue2基本相同。以下是在index.html中使用环境变量的步骤： 1. 在项目根目录下创建.env文件，可以创建多个不同环境的配置文件，如.env.development、.env.production等。 2. 在.env文件中定义环境变量，如：VUE_APP_API_URL=http://localhost:8080。 3. 在index.html中使用环境变量，如：`<script>const apiUrl = '<%=process.env.VUE_APP_API_URL%>';</script>`。 需要注意的是，在使用环境变量时，需要在变量名之前加上process.env，否则无法获取到环境变量的值。 另外，需要在项目根目录下创建一个vue.config.js文件来配置Vue CLI，以便让Vue CLI知道如何处理环境变量。在vue.config.js中添加以下代码： ``` module.exports = { chainWebpack: config => { config.plugin('html').tap(args => { args[0].templateParameters = { 'BASE_URL': process.env.BASE_URL, 'VUE_APP_API_URL': process.env.VUE_APP_API_URL }; return args; }); } }; ``` 这里的代码是让Vue CLI在处理index.html时，将环境变量注入到模板中。然后在index.html中通过模板变量来使用环境变量。 以上就是在Vue3中在index.html中使用环境变量的方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值