Vue-cli3 通过配置 public 目录下的 config.js 和config.json 实现一次编译,修改生效

news2024/11/9 6:23:30

文章目录

    • 1.背景
    • 2.配置步骤
    • 3.小结

1.背景

最近实施部门,有个需求就是研发人员通过vue 写完代码,yarn build 编译完成代码后,移交实施,通过修改public 文件夹下的 config 文件来实现修改,请求后台的 requestUrl 和 titile 的功能。由于在代码里配置后,yarn build 后会压缩js 导致,修改配置不方便。故经过我长期的研究总结出了一套可以完美从开发环境迁移到nginx 部署的方案。在此分享给有需要的小伙伴,一起共勉!!!

2.配置步骤

  1. public 文件夹下新增两个配置文件:config.js 和config.json
    在这里插入图片描述

config.js

export const globalConfig = {
  // 请求后台路径
  requestUrl: '/api'
}

config.json

{
  "logoTitle": "标题",
  "energyWarningShowFlag": false
}

index.html 页面里引入 这两个配置文件

<script  src="<%= BASE_URL %>config.js"></script>
<script  src="<%= BASE_URL %>config.json"></script>

完整的 html 页面:

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
  <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">
    <!--常见的头缺失或不安全问题:
    1、“Content-Security-Policy”头缺失或不安全
    2、“X-Content-Type-Options”头缺失或不安全
    3、“X-XSS-Protection”头缺失或不安全
    4、设置HTTP请求头(X-Frame-Options)-->
   <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'"/>
    <meta http-equiv="X-Content-Type-Options" content="nosniff" />
    <meta http-equiv="X-XSS-Protection" content="1; mode=block" />
    <meta http-equiv="X-Frame-Options" content="SAMEORIGIN">-->

    <link rel="icon" href="<%= BASE_URL %>img/logo.png">
    <title></title>
<!--    <title><%=htmlWebpackPlugin.options.title %></title>-->
    <!--<style>#preloadingAnimation{position:fixed;left:0;top:0;height:100%;width:100%;background:#ffffff;user-select:none;z-index: 9999;overflow: hidden}.lds-roller{display:inline-block;position:relative;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;}.lds-roller div{animation:lds-roller 1.2s cubic-bezier(0.5,0,0.5,1) infinite;transform-origin:32px 32px;}.lds-roller div:after{content:" ";display:block;position:absolute;width:6px;height:6px;border-radius:50%;background:#13c2c2;margin:-3px 0 0 -3px;}.lds-roller div:nth-child(1){animation-delay:-0.036s;}.lds-roller div:nth-child(1):after{top:50px;left:50px;}.lds-roller div:nth-child(2){animation-delay:-0.072s;}.lds-roller div:nth-child(2):after{top:54px;left:45px;}.lds-roller div:nth-child(3){animation-delay:-0.108s;}.lds-roller div:nth-child(3):after{top:57px;left:39px;}.lds-roller div:nth-child(4){animation-delay:-0.144s;}.lds-roller div:nth-child(4):after{top:58px;left:32px;}.lds-roller div:nth-child(5){animation-delay:-0.18s;}.lds-roller div:nth-child(5):after{top:57px;left:25px;}.lds-roller div:nth-child(6){animation-delay:-0.216s;}.lds-roller div:nth-child(6):after{top:54px;left:19px;}.lds-roller div:nth-child(7){animation-delay:-0.252s;}.lds-roller div:nth-child(7):after{top:50px;left:14px;}.lds-roller div:nth-child(8){animation-delay:-0.288s;}.lds-roller div:nth-child(8):after{top:45px;left:10px;}#preloadingAnimation .load-tips{color: #13c2c2;font-size:2rem;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin-top:80px;text-align:center;width:400px;height:64px;}  @keyframes lds-roller{0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);}}</style>-->
    <script src="<%= BASE_URL %>js/moment.min.js"></script>
    <script src="<%= BASE_URL %>js/vue.js"></script>

    <script src="<%= BASE_URL %>js/antd.min.js"></script>

    <link rel="stylesheet" href="<%= BASE_URL %>css/antd.min.css">
    <!--<style>-->
      <!--.ant-menu-dark .ant-menu-inline.ant-menu-sub{background:#123092;-webkit-box-shadow:0 2px 8px rgba(0,0,0,.45) inset;box-shadow:inset 0 2px 8px rgba(0,0,0,.45)}-->
      <!--.ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected,.ant-menu.ant-menu-dark .ant-menu-item-selected{background-color:#081a59}-->
      <!--.ant-menu-dark,.ant-menu-dark .ant-menu-sub{color:hsla(0,0%,100%,.65);background:#123092}-->
    <!--</style>-->
  </head>
  <body>
    <noscript>
      <strong>因为未启用 JavaScript,所以本项目无法正常工作。请启用 JavaScript!</strong>
    </noscript>
    <div id="app">
      <div id="preloadingAnimation"><div class=lds-roller><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div><div class=load-tips>Loading</div></div>
    </div>
    <!-- built files will be auto injected -->
    <script  src="<%= BASE_URL %>config.js"></script>
    <script  src="<%= BASE_URL %>config.json"></script>

  </body>
</html>

  1. main.js 里新增 getServerConfig 方法
import axios from 'axios'

function getServerConfig () {
  return new Promise ((resolve, reject) => {
    axios.get('../config.json').then(response => {
      console.log("读取外部化配置文件>>>>>>>>")
      let data = response.data
      console.log(data)  // 是否成功读取需要的配置项
      for (let key in data) {
        Vue.prototype["$"+key] = data[key];
        console.log("设置 $"+key +"  "+data[key])
      }
      console.log(Vue.prototype.$logoTitle)  // 验证是否已经把属性挂载在了Vue的原型上
      resolve();
    }).catch(error => {
      console.log(error);
      reject()
    })
  })
}
async function init(){
  await getServerConfig();
}

new Vue({
  router,
  store,
  created () {
    bootstrap();
    init();
  },
  render: h => h(App)
}).$mount('#app')

PS: Vue.prototype 表示将变量挂载到Vue 实例上,可以从页面调用。 config.js 里面的 变量可以从js 代码里调用;config.json 里可以从Vue 页面通过this.$var 的方式调用。

  1. 在Vue 页面里调用
<div class="header">
  <a href="/">
      <span class="title">{{ this.$logoTitle }}</span>
 </a>
</div>
  1. js 里面调用
import { globalConfig } from '../../public/config'
const baseUrl = process.env.NODE_ENV === 'production' ? globalConfig.requestUrl : process.env.VUE_APP_BASE_API
  1. 修改html 页面里的title
    router.beforeEache 里面 添加 document.title = Vue.prototype.$logoTitle 更改title 标题
router.beforeEach((to, from, next) => {
  document.title = Vue.prototype.$logoTitle
  NProgress.start() // start progress bar
  if (Vue.ls.get(ACCESS_TOKEN)) {
    /* has token */
    if (to.path === '/user/login') {
      next({ path: '/sys/menu' })
      NProgress.done()
    } else {
      if (!store.getters.nickname) {
        store
          .dispatch('GetInfo')
          .then(res => {
            // 新增服务器返回的菜单路由
            addRoutes(res.menus)
            const redirect = decodeURIComponent(from.query.redirect || to.path)
            if (to.path === redirect) {
              // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
              next({ ...to, replace: true })
            } else {
              // 跳转到目的路由
              next({ path: redirect })
            }
       
          })
          .catch((e) => {
            // Vue.prototype.$notification.error({
            //   message: '错误',
            //   description: '请求用户信息失败,请重试'
            // })
            store.dispatch('Logout').then(() => {
              next({ path: '/user/login', query: { redirect: to.fullPath } })
            })
          })
      } else {
        next()
      }
    }
  } else {
    if (whiteList.includes(to.name)) {
      // 在免登录白名单,直接进入
      next()
    } else {
      next({ path: '/user/login', query: { redirect: to.fullPath } })
      NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
    }
  }
})

3.小结

  1. Vue.prototype 表示将变量挂载到Vue 实例上,可以从页面调用。
  2. config.js 里面的 变量可以从js 代码里调用;config.json 里可以从Vue 页面通过this.$var 的方式调用。
  3. 在router 里面 新增document.title = Vue.prototype.$logoTitle 更改title 标题

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/23508.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

day10 分布式缓存

单机的 Redis 存在以下四大问题&#xff1a; 1、Redis持久化 Redis有两种持久化方案&#xff1a; RDB 持久化AOF 持久化 1.1、RDB 持久化 RDB 全称 Redis Database Backup file&#xff08;Redis数据备份文件&#xff09;&#xff0c;也被叫做 Redis 数据快照。简单来说就是把…

《500强高管谈VE》-面向STAKEHOLDERS东方企业的VM

文章出处&#xff1a;日本VE协会杂志文章翻译&#xff1a;泰泽项目部 关注泰泽&#xff1a;实现高利润企业 《500强高管谈VE》-面向STAKEHOLDERS东方企业的VM 作者&#xff1a;常务董事八木隆 本公司的日高工厂和丰浦工厂两个事业所获得了迈尔斯奖。这些都是支持企业活动的V…

无代码开发平台选型指南

一、如何选购SaaS SaaS评测网的面世&#xff0c;也原因在于有感于选型难于&#xff0c;期望可以提供更多有用的信息协助大家找出更可信赖与最合适的产品。简而言之授之以鱼、比不上授之以渔&#xff0c;接下来的系列产品该文&#xff0c;则是撷取选型的方法及避坑实战经验。 …

【大数据处理技术】第二篇 大数据存储与管理(持续更新)

文章目录第3章 分布式文件系统HDFS3.1 分布式文件系统3.1.1 计算机集群结构3.1.2 分布式文件系统的结构3.1.3 分布式文件系统的设计需求3.2 HDFS3.2.1 HDFS 简介及相关概念3.2.2 HDFS 体系结构3.2.3 HDFS 存储原理3.2.4 HDFS 数据读写过程3.2.5 HDFS 编程实践第4章 分布式数据库…

独立产品灵感周刊 DecoHack #038 - 纽约市 90 年代的街景长什么样

本周刊记录有趣好玩的独立产品设计开发相关内容&#xff0c;每周发布&#xff0c;往期内容同样精彩&#xff0c;感兴趣的伙伴可以点击订阅我的周刊。为保证每期都能收到&#xff0c;建议邮件订阅。欢迎通过 Twitter 私信推荐或投稿。产品推荐 1. 1940s.nyc - 这个网站可以看到…

Python版本机访问GEE,CoLab配置

一、本机Jupyter notebook访问GEE 首先感谢知乎这两篇文章提供的解决思路&#xff1a; Python版GEE学习笔记&#xff08;一&#xff09;-环境配置 - 知乎 GEE之Python学习——前期准备工作 - 知乎 前期尝试解决&#xff1a; 1. Anaconda 安装&#xff0c;重新创建虚拟环境…

2021年度聚合支付评级如何?

截至2022年11月15日&#xff0c;完成收单外包服务备案机构为15041家&#xff0c;其中含聚合支付类型的机构为481家。 2022年11月15日&#xff0c;中国支付清算协会正式发布了2021年度收单外包服务机构评级等级消息。显示共有包括银行和非银行支付机构在内的143家收单机构对958…

element-plus table组件单击行切换选中状态、点击高亮行、设置shift或ctrl连续多选和连续取消多选(支持多段选择)

演示效果 需求逻辑&#xff1a; 单击行切换选中状态不按住shift或者ctrl键点击一行&#xff0c;设置该行高亮&#xff0c;该行将作为起始行连续多选&#xff1a;高亮行作为起始位置&#xff0c;按住shift或者ctrl键后选中行作为结束位置&#xff0c;结束位置未勾选则连续多选…

第2-3-8章 分片上传和分片合并的接口开发-文件存储服务系统-nginx/fastDFS/minio/阿里云oss/七牛云oss

文章目录5.10 接口开发-分片上传5.10.1 分片上传介绍5.10.2 前端分片上传插件webuploader5.10.3 后端代码实现5.10.3.1 接口文档5.10.3.2 代码开发5.10.3.3 接口测试5.11 接口开发-分片合并5.11.1 FileChunkStrategy5.11.2 AbstractFileChunkStrategy5.11.3 LocalChunkServiceI…

OpenFeign源码1-环境搭建及核心类说明

0. 环境 nacos版本&#xff1a;1.4.1Spring Cloud : Hoxton.SR9&#xff08;没用2020.0.2版本后面说明&#xff09;Spring Boot &#xff1a;2.4.4Spring Cloud alibaba: 2.2.5.RELEASESpring Cloud openFeign 2.2.2.RELEASE 测试代码&#xff1a;github.com/hsfxuebao/s… 20…

WebDAV之葫芦儿·派盘+PassStore

PassStore 支持webdav方式连接葫芦儿派盘。 大家常用的qq,手机微信,新浪微博等。假如各个网址都设成同样的帐号和登陆密码,一旦某一帐户泄漏了,别的平台上的账户密码都有被撞库攻击的风险。在不一样的站点设定不一样的高韧性登陆密码才算是最安全可靠的确保,殊不知这般繁…

c++调用tf.keras的模型

​ 环境&#xff1a; ubuntu 20.04 python 3.8 tensorflow-gpu 2.4.0 显卡 nvidia rtx A6000 驱动 495.29.05 cuda 11.5 cudnn 8.3.0 tensorRT 8.4 1.将keras保存的h5模型转成darknet的weight&#xff0c;然后用opencv加载 cv::dnn::Net net cv::dnn::readNetFromDar…

链表中快慢指针的应用

目录 一、链表的中间结点 二、回文链表 三、链表中倒数第K个结点 四、删除链表的倒数第n个结点 一、链表的中间结点 给定一个头结点为 head 的非空单链表&#xff0c;返回链表的中间结点。 如果有两个中间结点&#xff0c;则返回第二个中间结点。 先设置两个low和fast都指…

【MySQL】测试题03

文章目录1、创建数据库2、使用数据库3、创建数据表【3.1】创建学生信息表Student【3.2】创建课程信息表Course【3.3】创建教师信息表Teacher【3.4】创建成绩信息表Score4、添加数据【4.1】向学生student表添加数据【4.2】向课程course表添加数据【4.3】向教师信息teacher表添加…

【动手学深度学习】softmax回归的从零开始实现(PyTorch版本)(含源代码)

目录&#xff1a;softmax回归的从零开始实现一、理论基础1.1 前言1.2 分类问题1.3 网络架构1.4 全连接层的参数开销1.5 softmax运算1.6 小批量样本的矢量化1.7 损失函数1.7.1 对数似然1.7.2 softmax及其导数1.7.3 交叉熵损失1.8 信息论基础1.8.1 熵1.8.2 信息量1.8.3 重新审视交…

19 02-检索满足客户端定义的状态掩码的DTC列表

诊断协议那些事儿 诊断协议那些事儿专栏系列文章&#xff0c;19服务作为UDS中子功能最多的服务&#xff0c;一共有28种子功能&#xff0c;本文将介绍常用的19 02服务&#xff1a;根据状态掩码读取DTC列表。 关联文章&#xff1a; 19服务List 19 01-通过状态掩码读取DTC数目 …

详细教程。2022年滁州市明光市、来安县等各地区高新技术企业申报

安徽省大力鼓励企业申报高新技术企业&#xff0c;于高企申报也有很多奖补。滁州市企业申报奖补政策发布&#xff0c;企业可以根据自身情况申请奖补&#xff0c;奖补金额为10万元至30万元不等&#xff0c;明光市&#xff0c;凤阳县等各地区奖补申请可以通过市级机关办理。 下面小…

跟艾文学编程《Python数据可视化》(01)基于Plotly的动态可视化绘图

作者&#xff1a;艾文&#xff0c;计算机硕士学位&#xff0c;企业内训讲师和金牌面试官&#xff0c;公司资深算法专家&#xff0c;现就职BAT一线大厂。邮箱&#xff1a;1121025745qq.com博客&#xff1a;https://wenjie.blog.csdn.net/内容&#xff1a;跟艾文学编程《Python数…

2022-11-21 mysql列存储引擎-架构实现缺陷梳理-P2

摘要: 收集现有代码的糟糕实现&#xff0c;前事不忘后事之师&#xff0c;把这些烂东西定死在耻辱柱上以免再次发生 糟糕的设计: 一. DGMaterializedIterator::GetNextPackrow 函数实现: int DimensionGroupMaterialized::DGMaterializedIterator::GetNextPackrow(int dim, int…

【Linux系统】第一篇:基础指令篇

文章目录一、Linux中的文件二、Linux用户三、Linux基本指令ls指令pwd命令cd指令touch指令mkdir指令rmdir指令rm 指令man指令cp指令mv指令cat指令tac指令more指令less指令head指令tail指令管道重定向date指令cal指令find指令which指令alias指令whereis指令grep指令wc指令sort指令…