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

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

缘起

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

大致步骤如下：

项目根目录创建文件 vue.config.js
添加配置 =》配置全局变量
其他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 参考文档

完

本文链接：https://blog.csdn.net/Chad97/article/details/105797760

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Webpack4 升级报错 Error: Cannot find module 'webpack-cli/bin/config-yargs' 等（含html-webpack-plugin）_cannot find module 'webpack-bundle-analyzer_维一 CN的博客-程序员秘密

问题一 Error: Cannot find module 'webpack-cli/bin/config-yargs'问题二 TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function问题三 TypeError: Cannot read property 'eslint' of undefined问题四 TypeError: Cannot read property 'vue' of undefined

Luaj学习笔记(三) - LuaJ创建AWT窗体的应用示例_猿长大人的博客-程序员秘密

Luaj学习笔记(三) - LuaJ创建AWT窗体的应用示例Luaj学习笔记(三) - LuaJ创建AWT窗体的应用示例项目文件结构入口程序宠物狗类Lua脚本运行截图结束语项目文件结构项目目录结构如下：入口程序命名为Test.java的Java程序文件。package pers.landriesnidis.testluaj;impor...

Nginx启动错误:error while loading shared libraries: libpcre.so.1_weixin_30458043的博客-程序员秘密

1# /usr/local/nginx/sbin/nginx2/usr/local/nginx/sbin/nginx: errorwhileloading shared libraries: libpcre.so.1: cannotopenshared objectfile: No suchfil...

MQ135传感器测试_mq135空气质量传感器原理_蒙古战狼的博客-程序员秘密

原理图Vrl可以接电压比较器，或者ADC。电压比较器下面是测量原理，这本电路中，VC=5V,Vrl=1.02V，RL=1K,求得RS≈4K，如果已知R0（即出厂时，将传感器放入100ppm的氨气中，测得的电阻值），则可以求出RS/R0，根据图1，就可以求出PPM值了。...

mkfs文件系统_mkfs拒绝使用消息“显然已被系统使用；不会在这里建立文件系统！”..._cuma2369的博客-程序员秘密

mkfs文件系统I have a disk from another server installed on a new server. However, when I try to make a filesystem on it, mkfs reports 我在新服务器上安装了另一台服务器的磁盘。但是，当我尝试在其上创建文件系统时， mkfs报告 # mkfs -t ext4 /dev/sd...

PHP正则淘口令,Flutter代码锦囊---淘口令复制弹窗_Venny Dun的博客-程序员秘密

对于淘系电商APP或其他类似的APP而言，获取剪贴板上的淘口令，再解析出具体的商品详情，是整个APP的核心业务操作，就像下面图片展示的这样。 IMG_B955B557304E-1.jpeg下面我们就用Flutter实现这个功能，首先是前面一部分导入相关引用和常规页面布局代码，直接复制就好了。import 'package:flutter/material.dart';import 'package...