首页 > 其他分享 >vue项目通过外部配置文件读取接口地址- 在webpack-index.html模板中使用环境变量

vue项目通过外部配置文件读取接口地址- 在webpack-index.html模板中使用环境变量

时间:2023-04-12 10:33:51浏览次数:38  
标签:index vue 配置文件 SITE window html env CONFIG

概述:在index.html模板中判断当前环境,处于开发环境下时读取process环境变量、处于生产环境下时读取根目录配置文件(./config.js),两种环境下将配置统一挂载到window全局变量上(SET_CONFIG)
config.js

window.SITE_CONFIG = {
  appTitle: '系统测试',
  version: '1.0.0',
  apiURL: '',
  websocketURL: '',
  reportURL: ''
}

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
  <link rel="icon" href="<%= BASE_URL %>favicon.ico"/>
  <title><%= VUE_APP_TITLE %></title>
  <% if (process.env.NODE_ENV === 'production' ) { %>
  <script type="text/javascript" src="config.js"></script>
  <script>
    document.title = window.SITE_CONFIG.appTitle
  </script>
  <% } %>
  <!--    其他环境读取环境变量-->
  <% if (process.env.NODE_ENV !== 'production' ) { %>
  <script>
    window.SITE_CONFIG = {};
    window.SITE_CONFIG['appTitle'] = '<%= process.env.VUE_APP_TITLE %>';
    window.SITE_CONFIG['version'] = '<%= process.env.VUE_APP_VERSION %>';
    window.SITE_CONFIG['apiURL'] = '<%= process.env.VUE_APP_API %>';
    window.SITE_CONFIG['websocketURL'] = '<%= process.env.VUE_APP_API_WEBSOCKET %>'
    window.SITE_CONFIG['VUE_APP_API_REPORT'] = '<%= process.env.VUE_APP_API_REPORT %>'
  </script>
  <% } %>
</head>
<body>
<noscript>
  <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

注意!!!

当env文件不是默认的.env.development或.env.production而是带有自定义模式的后缀时

例如.env.prod 执行命令为vue-cli-service build --mode prod

此时需要在.env.prod中手动指定构建模式

NODE_ENV=production

标签:index,vue,配置文件,SITE,window,html,env,CONFIG
From: https://www.cnblogs.com/whh666/p/17308942.html

相关文章

  • vue之组件
    目录简介全局组件语法示例局部组件语法示例组件间通信父子页面通信之父传子语法示例组件通信之子传父语法示例使用ref进行父子组件通信方法示例动态组件(component)普通方法实现使用组件component实现动态组件相关keep-alive组件之插槽(slot)匿名插槽具名插槽简介组件(component......
  • web网站使用indexedDB缓存大数量案例
    前言及背景indexedDB是html5标准引入的web数据持久化方案之一,现代浏览器大多按照标准对其进行了实现,我在新的项目中用到它来作为持久化数据存储,由于最近在web端项目,每次web前端需要实时计算中间成果预计18G的中间过度数据,预计最终每次生成200M以上的结果数据,在此过程耗时30多......
  • 1.Vue的基本原理
    当一个Vue实例创建时,Vue会遍历data中的属性,用Object.defineProperty(vue3.0使用proxy)将它们转为getter/setter,并且在内部追踪相关依赖,在属性被访问和修改时通知变化。每个组件实例都有相应的watcher程序实例,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的setter被调用时,会......
  • Vue3快速上手
    Vue3快速上手1.Vue3简介2020年9月18日,Vue.js发布3.0版本,代号:OnePiece(海贼王)耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者github上的tags地址:https://github.com/vuejs/vue-next/releases/tag/v3.0.02.Vue3带来了什么1.性能的提升打包大小减少41%初次......
  • 1.Vue的基本原理
    当一个Vue实例创建时,Vue会遍历data中的属性,用Object.defineProperty(vue3.0使用proxy)将它们转为getter/setter,并且在内部追踪相关依赖,在属性被访问和修改时通知变化。每个组件实例都有相应的watcher程序实例,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的setter被调用......
  • (一)初始vue
    data属性data属性是传入一个函数,并且该函数需要返回一个对象:在Vue2的时候,也可以传入一个对象在Vue3的时候,必须传入一个函数,否则报错data中返回的对象会被vue的响应式系统劫持,之后对该对象的修改或者访问都会在劫持中被处理:所有我们在template或者app通过{{counter}},访问......
  • #yyds干货盘点 springboot和vue搭建前后端项目实现员工的增删改查
    前言我是歌谣今天继续带来前后端项目的开发上次已经开发了部门管理,今天继续开发员工管理后端第一步empcontroller代码packagecom.itheima.controller;importcom.itheima.pojo.Emp;importcom.itheima.pojo.PageBean;importcom.itheima.pojo.Result;importcom.itheima.s......
  • Vue动态创建组件实例并挂载到body
    方式一importVuefrom'vue'/***@paramComponent组件实例的选项对象*@paramprops组件实例中的prop*/exportfunctioncreate(Component,props){constcomp=new(Vue.extend(Component))({propsData:props}).$mount()document.body.appendChild(......
  • 一个 OpenTiny,Vue2 Vue3 都支持!
    大家好,我是Kagol,OpenTiny 开源社区运营,TinyVue 跨端、跨框架组件库核心贡献者,专注于前端组件库建设和开源社区运营。今天给大家介绍如何同时在Vue2和Vue3项目中使用 TinyVue。TinyVue是一套跨端、跨框架的企业级UI组件库,支持Vue2和Vue3,支持PC端和移动端。......
  • vue3使用elmentui-plus中的图标
    按照官网这样直接引入使用,不知道为啥行不通:import{Document,MenuasIconMenu,Location,Setting,}from'@element-plus/icons-vue'使用时,需要<script>import{UserFilled}from'@element-plus/icons-vue'//使用的时候需要单独引入这个图标从......