记-vue vue.config.js 配置webpack全局变量_vue.config.js使用全局变量_$(薛定谔的喵)的博客-程序员秘密

技术标签: web前端  webpack  vue  npm  javascript  

缘起

vue-cli3 以来 是不会 暴露 webpack.config.js 的 需要我们手动来配置
因为近期 接手的一个项目 我需要从 package.josn 拿参数 然后 在其他 js文件拿到配置

  • 大致步骤如下:
  1. 项目根目录 创建文件 vue.config.js
  2. 添加配置 =》 配置全局变量
  3. 其他js 拿到全局变量
  • 配置大致和 webpack 差不多

for example

我们通过 process 来获取参数

  • process.env config 参数
  • process.env 自定义参数 参数

VUE 平台配置内容

我们在这里的 配置都会被合并到 配置文件中 use webpack-merge

  • 我们当前 需求使用chainWebpack

类似这样

// vue.config.js
module.exports = {
    
  chainWebpack: config => {
    
    config.module
      .rule('vue')
      .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
    
          // 修改它的选项...
          return options
        })
  }
}

我们需要到 配置业比较简单 如下:️

// VUE 平台配置内容
module.exports = {
    
  // 配置自定义环境变量
  chainWebpack: config => {
    
    config
      .plugin('define')
      .tap(args => {
     
          args[0].BUILD_REF = JSON.stringify(ref)
          return args
      })

}}

可以看到 我们自定义来 一个 BUILD_REF 全局变量 接下来 就可以在任何地方引用它来

vue-cli 参考文档

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Chad97/article/details/105797760

智能推荐

20190119——Java从入门到精通 第十八章 多线程_宫城诗的博客-程序员秘密

如果一次只完成一件事情,就会很容易实现,但现实生活中很多事情都是同时进行的,所以在java中为了模拟这种状态,引入了线程机制,简单的说,当程序同时完成多件事情,就是所谓的多线程程序,多线程应用相当广泛,使用多线程可以创建窗口程序,网络程序等。线程简介世间万物都可以同时完成很多工作,例如,人体可以同时进行呼吸、血液循环、思考问题等活动。用户既可以使用计算机听歌,也可以使用它打印文件,而这些活动完...

《The Wiley Handbook of Human Computer Interaction》翻译(冰山一角)_brown和cairns将沉浸感简单的定义为“参与游戏的程度”。_KeddyWell的博客-程序员秘密

一、翻译原文定位:Part VII Interaction,A Quick Look at Game Engagement Theories 部分二、翻译原文链接(英文):三、翻译(中文):主题3 :认知这个主题从认知的角度描述了游戏参与。心流理论研究者(2012年的考克斯、凯恩斯、沙阿和卡罗尔;2004年的卢卡斯和雪莉;2011年的威布尔和维斯马斯)将心流定义为认知方面的任务体验(...

Ubuntu 16.04开发CUDA程序入门(一)_ubuntu16.04 cuda编程_海燕呐哈哈哈哈哈哈的博客-程序员秘密

以在Ubuntu16.04下开发CUDA程序实现两个一维数组相加的简单实例,展示了在Ubuntu系统下开发CUDA程序的基本过程。

linux sysctl 内存,linux的sysctl.conf参数介绍_Damon DanceForMe的博客-程序员秘密

abi.vsyscall32 = 1debug.exception-trace = 1debug.kprobes-optimization = 1dev.cdrom.autoclose = 1dev.cdrom.autoeject = 0dev.cdrom.check_media = 0dev.cdrom.debug = 0dev.cdrom.info = CD-ROM information, ...

spring源码执行步骤__Ray_Lee_的博客-程序员秘密

BeanFactory factory = new XmlBeanFactory();factory.getBean();个人总结的上面两行代码执行的步骤图。参考了《Spring源码深度解析》。自己理解的,如有错误,欢迎指出。

cmath常用函数_cmath包括哪些函数_真的胜哥的博客-程序员秘密

原文:http://blog.sina.com.cn/s/blog_68e462650100l3zy.html1.绝对值函数int abs(int i) 返回整型参数i的绝对值long labs(long n) 返回长整型参数n的绝对值double fabs(double x) 返回双精度参数x的绝对值2.指数函数double pow(double x,double y) ...

随便推点

Android_播放器的进度条_怪我冷i的博客-程序员秘密

package com.itheima.musicplayer;import java.io.File; import java.io.IOException; import java.util.Timer; import java.util.TimerTask;import android.app.Activity; import android.media.AudioManager;

HDU2059 龟兔赛跑 (DP)_2059 龟兔赛跑_一百个Chocolate的博客-程序员秘密

Description据说在很久很久以前,可怜的兔子经历了人生中最大的打击——赛跑输给乌龟后,心中郁闷,发誓要报仇雪恨,于是躲进了杭州下沙某农业园卧薪尝胆潜心修炼,终于练成了绝技,能够毫不休息得以恒定的速度(VR m/s)一直跑。兔子一直想找机会好好得教训一下乌龟,以雪前耻。最近正值HDU举办50周年校庆,社会各大名流齐聚下沙,兔子也趁此机会向乌龟发起挑战。虽然乌龟深知获胜希望不大,不过迫于...

Listary一款不只是程序员需要的软件_vr7jj的博客-程序员秘密

当我们使用电脑试图去打开某个文件的时候,你总会先想这个文件在哪个盘在哪个目录下。然后双击一层层的进直到找到目标文件。这样频繁的文件夹点击将会极大的制约你的效率。Listary就能帮你解决上述问题,当然它的强大之处不仅限于此。

Python-求字典中的最值_已知有一个包含一些同学成绩的字典_不想敲代码的小孩的博客-程序员秘密

已知一个包含一些同学成绩的字典,现在需要计算所有成绩的最高分、最低分、平均分,并查找所有最高分的同学。例如 scores={“zhang San”:45,“Wang Wu”:40,“Zhou liu”:96,“Zhao Qi”:65,“Sun Ba”:90……}代码:scores={“zhang San”:45,“Wang Wu”:40,“Zhou liu”:96,“Zhao Qi”:65,...

关于spring resttemplate超时设置_张大仙是个妖怪的博客-程序员秘密

Spring org.springframework.web.client.RestTemplate 使用 org.springframework.http.client.SimpleClientHttpRequestFactory建立 java.net.HttpURLConnection后者采用 HttpURLConnection 的默认超时配置HttpURLConnection 超时属...

推荐文章

热门文章

相关标签