乐趣区

关于前端:vue-项目中-webpack-打包暴露出配置文件

jiezi

利用场景

  • 在理论工作中，为了调试不便，可能须要随时更换接口环境、加解密等相干配置。如果每次调试都从新打包，操作起来比拟麻烦，且 webpack 打包之后的内容无奈进行反向编译。
  • 咱们能够在全局暴露出一个配置文件，使这个文件不会被 webpack 打包，以此用来管制咱们须要频繁更改的配置参数。

目录构造及应用

  • 在 static 文件下新建一个 js 文件，我这里起名为 config.js
|-- public
|-- |-- js
|-- |-- static
|-- |-- |-- config.js
|-- |-- index.html
|-- dist
  • 在 config.js 中，把须要管制的变量绑定到 window 上 
window.global = {
  somethingFlag: false,
  baseUrl:'http://XXX.XXX.com',
  //。。。其余须要配置的内容
}
  • 在 index.html 中引入配置文件 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>test</title>
  <!-- 引入全局配置文件 -->
  <script src="static/config.js"></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>
  • 代码中应用的时候，只须要拜访 window 上绑定的这个对象即可 
if(window.global.somethingFlag) {// somethingFlag 为 true 时做一些事} else {// somethingFlag 为 false 时做一些事}

// 创立 axios 实例
const service = axios.create({
    baseURL: window.global.baseUrl,// 申请根目录
    timeout: 20000 // 申请超时工夫
})
  • 配置好文件后，进行打包，就会发现 static 中增加的 config.js 没有被打包，并且批改 config.js 中的内容后，配置会失效。
|-- dist
|-- |-- css
|-- |-- fonts
|-- |-- img
|-- |-- js
|-- |-- static
|-- |-- |-- config.js
|-- |-- index.html
退出移动版