vue 在index.html中配置全局变量（可实现打包后修改变量值）

已于 2022-10-13 16:47:44 修改
阅读量3.9k 收藏 4
点赞数 5
文章标签： vue.js html javascript
于 2022-10-13 16:40:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57055436/article/details/127303703
版权

总结/目录

全局变量配置流程

1. 在public文件夹中新建一个config.js文件（名字不限）

var $baseURL = 'http://0.0.0.0:8080/api/'

文件中定义全局变量，变量前加上 $ 便于识别为全局变量

2. 在public文件夹下的index.html中<head></head>标签中加入 以下代码

 <script type="text/javascript">
      document.write("<script type='text/javascript' src='./config.js?configRandom=" + Math.random() + "'></s" + "cript>");
 </script>

src='./config.js（路径为第一点中新建 config.js 文件的路径）
效果如下

  <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">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script type="text/javascript">
      document.write("<script type='text/javascript' src='./config.js?configRandom=" + Math.random() + "'></s" + "cript>");
    </script>
  </head>

3.以上配置完成

在vue文件中可直接使用$baseURL变量

swaveye9060
关注
  • 5
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue中接口域名配置为全局变量的实现方法
01-19
src中新建 一个 domain.js文件 // 配置全局接口域名 ... export default { ...以上这篇vue中接口域名配置为全局变量的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开
vue项目中,main.js,App.vue,index.html的调用方法
10-17
今天小编就为大家分享一篇vue项目中,main.js,App.vue,index.html的调用方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue在Index.html中自定义全局变量
最新发布
weixin_36628615的博客
07-04 39
在inde.html定义整个项目都能访问的变量,用于判断等等直接在 index.html中 js登录后复制 <script> window.VUE_APP_NODE_ENV = '<%= process.env.NODE_ENV %>'; </script>1...
在vue3+vite中实现index.html的模板变量使用
SuperBugwcx的博客
10-08 1288
一般适合vue打包后将index.html用其他的程序模板渲染一些seo信息的用途。假设index.html需要使用titiel 可以写 <%= title %>然后再vite.config.js中使用。
vue技巧（十）全局配置使用（打包后可修改配置文件）
Interest1_wyt的博客
06-13 1007
vue js或json全局配置使用，打包后保持配置文件不变，支持打包后修改配置文件内容
全局变量，打包vue项目后 修改变量（例如：api后端接口路径 或者 其他变量）
zhongmei121的专栏
04-12 4457
在static下面创建一个js文件（随便一个js文件），我这里是baseUrl.js 添加下面路径到全局变量window.g： window.g = { casUrl: 'http://192.168.xxx.xxx:8080', datamanagerUrl: 'http://10.91.xxx.xxx:8088' } 把baseUrl.js引入index.html中， &lt...
vue index.html根据环境变量加载不同js及如何使用全局变量
Maxiaobai_ing的博客
08-20 2535
vue index.html根据环境变量加载不同js及如何使用全局变量 vue中静态html使用loash template使用全局变量 // An highlighted block <% if (process.env.NODE_ENV === 'production' ) { %> <!-- 内网地图 --> <script src="1.js" ></script> <% } %> <% if (process.env.NODE_EN
在Vue.js的public目录下的index.html文件中，可以使用EJS（Embedded JavaScript）模板语法来插入变量。
weixin_50622621的博客
07-31 468
被用于插入对应的变量。这些变量将被EJS模板引擎根据环境和配置进行替换。插件是Vue CLI提供的用于生成HTML文件的插件。
Vue3 配置config文件，打包后随意修改配置，无需重新打包和重启
Admans的专栏
11-22 3940
在public目录创建config.json文件，名字随便起。刷新页面后即显示新的内容。打开main.js，导入。
在vue3中如何定义全局变量和方法
qq_42931285的博客
03-28 1003
在vue3中如何定义全局变量和方法
vue项目使用.env文件配置全局环境变量的方法
10-16
主要介绍了vue项目使用.env文件配置全局环境变量的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue在index.html中引入静态文件不生效问题及解决方法
10-17
完成上述修改后，Vue CLI将在构建过程中正确地复制`public`目录下的静态资源至输出目录，并且`index.html`可以成功引用它们。 ### 总结 在遇到Vue在`index.html`中引入静态文件不生效的问题时，首先要检查静态文件...
html怎么定义全局变量,如何使用css var()设置全局变量(不必设置每个元素的属性?)...
weixin_35411480的博客
06-05 2030
在这个jfiddle中:CSSvar()正在使用javascript设置setProperty:// CSS::root {--footer-color: #2cba92 // default}footer {background-color: var(--footer-color)}// JS:const footer = document.querySelector('footer')foot...
vue 项目 打包或者本地运行时 通过package.json 修改 环境变量
qq_38743783的博客
01-04 1458
在 Vue 项目的 package.json 文件中，您可以使用 cross-env 包来指定环境变量，以在构建过程中使用特定的配置。测试环境打包 npm run build:development。如果您有其他自定义的环境变量，可以按照相同的方式添加它们。正式环境打包 npm run build。在这个示例中，我们使用。
vue3_定义全局函数和变量
qq_45104829的博客
05-29 166
【代码】vue3_定义全局函数和变量。
基础知识系列（三）：Vue3设置全局变量和地图挂载全局
A20231015的博客
11-27 836
1.删包：git bash终端 rm -rf node_modules Linux命令。3.将OL_SDK和libs（Libraries 的缩写）文件夹放在src文件夹下。在OpenControl.vue中。在OpenControl.vue中。在main.js即入口文件中。在App.vue即组件文件中。在OpenMap.vue中。在OpenMap.vue中。
vue3项目打包后，在打包文件中修改接口的配置
reembarkation的博客
01-08 1154
vue3项目打包后，在打包文件中修改接口的配置
Vue根页面index.html中注入变量（htmlWebpackPlugin.options的使用,简单使用及遍历）
Cvory
02-10 4169
`webpack` 中使用 `HtmlWebpackPlugin` 的用法，自动引入打包输出的所有资源（**JS/css**）
vue-在vue中引用index.html中定义的var全局变量
automsen
03-24 5677
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言总结 前言 最近在vue项目使用http://pv.sohu.com/cityjson?ie=utf-8接口获取客户端用户的ip及地区，出现returnCitySN未定义的错误，经过分析returnCitySN属于window的一个属性变量，而不是Vue中的一个属性变量,而在vue中如果要使用全局变量，需要在main.js中赋予变量给Vue，所有想到的解决办法在main.js中将window的returnCitySN变量赋值
vue global.vue 怎么实现全局变量
06-09
在Vue中，我们可以通过在一个单独的Vue实例中定义全局变量并在其他组件中使用来实现全局变量。 首先，在一个单独的Vue实例中定义全局变量： ``` // global.vue <template> <div></div> </template> <script> export default { data() { return { globalVariable: 'Hello World!' } } } </script> ``` 接下来，在其他组件中使用该全局变量，我们可以通过Vue的mixin混入选项来实现： ``` // otherComponent.vue <template> <div>{{ globalVariable }}</div> </template> <script> import global from './global.vue'; export default { mixins: [global], // ... } </script> ``` 这样，在otherComponent.vue组件中就可以使用global.vue中定义的全局变量了。 另外，我们也可以在Vue.prototype中挂载全局变量，这样可以在任何Vue组件中访问到该全局变量： ``` // global.js import Vue from 'vue'; Vue.prototype.$globalVariable = 'Hello World!'; // otherComponent.vue <template> <div>{{ $globalVariable }}</div> </template> <script> export default { // ... } </script> ``` 这样在其他组件中就可以通过`$globalVariable`来访问全局变量了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值