記-vue vue.config.js 配置webpack全局變量

緣起

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 參考文檔

完