vue3.0-vue-cli開發環境中如何改變vue.config.js來構建相同項目不同主題

思考：同一個項目不同客戶對應的主題不一樣，該如何來配置，能夠快速便捷的構建(build)不同主題？

...

...

...

1、大部分都會想到把主題提取到單獨的css文件(css預編譯語言：less,stylus,scss)分包管理，這是必須的

2、如果是多語言，每個客戶對應的中文略有不同，也要拆分管理

拆分之后該如何添加配置來一次性配置永久使用呢？總不能每次build都要手動改變下入口文件吧(費時費力)~~

 

思路：新版vue-cli開發腳手架說是0配置，但是需要添加配置還是的改編vue.config.js，再結合nodejs來實現上面的最優解決方案

 

舉例說明：

1. 首先我們在package.json中scripts部分添加不同的變量入口，THEME_PATH是入口處定義一個node環境變量，這樣在npm run dev:dajiang之后，vue.config.js中就能讀取到process.env.THEME_PATH的值等於dajiang(關於node參考http://nodejs.cn/api/)，此處需要安裝：npm install -D cross-env

 

 

 

2. 在vue.config.js中拿到process.env.THEME_PATH的值之后，我們來添加webpack的配置到vue.config.js中

'use strict'
const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

const themeSrc = process.env.THEME_PATH || 'default'

// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {
  // 自定義webpack的配置
  configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: name,
    resolve: {
      alias: {
        // 配置別名讓所有訪問：themePath的路徑使用變量控制
        'themePath': resolve(`src/styles/theme/${themeSrc}`)
      }
    }
  }
}

　

3. 上面配置完成之后路徑配置已經完成，剩下的就是去添加對應的客戶主題和引入使用了，如下：styles/theme/default對應默認主題，與package.json中的dev對應，default/index.js對應該主題的多語言等其他配置，default/index.scss對於默認的主題(scss變量)

 

 

 

 

 4. 使用起來就很簡單了，因為配置之后只要遇到訪問：themepath的路徑就會讀取配置的路徑，如：

 

 這樣就會讀取你在npm run dev:xx，npm run build:xx后面的參數，讀取js類似，而且即使在組件內部import veriables.scss直接使用變量也可以。