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

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

...

...

...

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

二、若是是多語言，每一個客戶對應的中文略有不一樣，也要拆分管理

拆分以後該如何添加配置來一次性配置永久使用呢？總不能每次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直接使用變量也能夠。