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

已于 2022-10-13 16:47:44 修改
阅读量3.8k 收藏 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的main，index 基本配置
ITxiaoM的博客
10-31 158
【代码】vue的main，index 基本配置。
手写vite插件之在index.html中根据不同的环境来使用不同的值
最新发布
lth002的博客
04-09 499
在index.html文件中使用。
vue中html引入使用＜%= BASE_URL %＞变量
Xiang_Gong_Ya_的博客
08-28 3643
首先使用src相对路径引入。
Vue根页面index.html中注入变量（htmlWebpackPlugin.options的使用,简单使用及遍历）
Cvory
02-10 4079
`webpack` 中使用 `HtmlWebpackPlugin` 的用法，自动引入打包输出的所有资源（**JS/css**）
vue 打包动态设置＜meta＞内容
qq_41737172的博客
06-24 903
vue 项目全局添加自定义内容
在Vue.js的public目录下的index.html文件中，可以使用EJS（Embedded JavaScript）模板语法来插入变量。
weixin_50622621的博客
07-31 452
被用于插入对应的变量。这些变量将被EJS模板引擎根据环境和配置进行替换。插件是Vue CLI提供的用于生成HTML文件的插件。
vue3+vite 在html文件中添加环境变量
热门推荐
一缕阳光@的博客
07-04 1万+
vue3加vite添加环境变量
vue项目使用.env文件配置全局环境变量的方法
10-16
主要介绍了vue项目使用.env文件配置全局环境变量的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue在index.html中引入静态文件不生效问题及解决方法
10-17
完成上述修改后，Vue CLI将在构建过程中正确地复制`public`目录下的静态资源至输出目录，并且`index.html`可以成功引用它们。 ### 总结 在遇到Vue在`index.html`中引入静态文件不生效的问题时，首先要检查静态文件...
将前端vue项目部署到nginx中，vue中publicPath自动拼接一个路径
cjy1575944940的博客
08-22 4122
将原本部署在tomcat中的vue项目改成部署在nginx中。强调了vue.config.js里的publicPath对nginx配置的影响，修改访问路径后vue配置以及nginx配置都需要修改
vue3 + vite引入scss全局变量
domyself918的专栏
05-09 4419
情境： 使用了element-plus并按照官方加入了自定义主题的css.也有自己的全局变量globalstyle.scss文件。 需求： 想把globalstyle.scss文件中的代码可以每个vue文件中的<style>代码块访问到。 解决过程： 全局变量前： globalstyle.scss的引入方式(在index.html中引入) //index.html <!DOCTYPE html> <html lang="en"> <head&..
【vue】打包后，访问public文件的index.html，访问不到js和css，需要配置publicPath:“ “
weixin_43444977的博客
10-11 4071
在vue.config.js文件添加配置项publicPath，publicPath路径修改" "，dist文件下index.html即可找到。vue.config.js文件中publicPath路径为“/”，表示根目录下，是访问不到js和css文件的，vue项目打包后， index.html直接访问不到 css 文件和 js 文件；
随手笔记：vue public文件夹index.html全局引入js
weixin_45116920的博客
05-22 2874
所以我们可以采用 Vue CLI 中的 变量，它是在Vue应用运行时动态生成的，可以用于自动计算出当前页面所在目录的绝对路径。在默认情况下，这个变量的值为"/"，代表着应用的根路径。例如，在当前页面的URL路径为"/example/my-page"时，如果使用相对路径引入静态资源，可能会导致资源无法正确地加载。绝对路径通常是固定的，并不支持动态计算路径，而Vue CLI的变量正是为了避免这种问题而设计的。
在vue3+vite中实现index.html的模板变量使用
SuperBugwcx的博客
10-08 1185
一般适合vue打包后将index.html用其他的程序模板渲染一些seo信息的用途。假设index.html需要使用titiel 可以写 <%= title %>然后再vite.config.js中使用。
vue-在vue中引用index.html中定义的var全局变量
automsen
03-24 5668
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言总结 前言 最近在vue项目使用http://pv.sohu.com/cityjson?ie=utf-8接口获取客户端用户的ip及地区，出现returnCitySN未定义的错误，经过分析returnCitySN属于window的一个属性变量，而不是Vue中的一个属性变量,而在vue中如果要使用全局变量，需要在main.js中赋予变量给Vue，所有想到的解决办法在main.js中将window的returnCitySN变量赋值
全局变量，打包vue项目后 修改变量（例如：api后端接口路径 或者 其他变量）
zhongmei121的专栏
04-12 4455
在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 2470
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 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、付费专栏及课程。

余额充值