核心：sass-resources-loader元件

實現過程如下：

1.安裝

npm i sass-resources-loader -S

2.修改配置檔案build/utils.js

2.1 在cssLoaders中新增如下程式碼：

// 全域性less變數配置
function lessResourceLoader() {
  var loaders = [
      cssLoader,
      'less-loader',
      {
          loader: 'sass-resources-loader',
          options: {
              resources: [
                  // 此處地址指向配置less變數的檔案
                  path.resolve(__dirname, '../src/assets/public.less'),
              ]
          }
      }
  ];
  if (options.extract) {
      return ExtractTextPlugin.extract({
          use: loaders,
          fallback: 'vue-style-loader'
      })
  } else {
      return ['vue-style-loader'].concat(loaders)
  }
}
 

2.2 配置後如下圖所示：

2.3 修改cssLoaders返回值，將less的值替換為剛剛新增的less配置方法lessResourceLoader；

3.建立less變數（方法）配置檔案

在2.2配置指向的檔案中新增less變數/方法（我設定了src/assets/public.less為less全域性檔案，實現可依據個人開發情況調整）；

4.使用

案例程式碼

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style scoped lang='less'>
h1 {
  color: @color1;
}
</style>
 

案例效果

ps:以上為個人開發過程中總結，不足之處，歡迎留言指正交流~