可替换的内容

1. 一些图标(需使用background而非img)
2. 一些颜色(包括文字/背景/边框颜色)

配置方式

1. 在package.json中配置自定义环境变量STORE_THEME，如

    "start": "vue-cli-service serve",
    "start-lanwo": "cross-env STORE_THEME=lanwo npm run start",
    "build": "vue-cli-service build",
    "build-lanwo": "cross-env STORE_THEME=lanwo  npm run build",

2. 在vue.config.js中读取该环境变量并加载不同的scss
   • 注意sass-loader 8.0以上版本应改data为prependData
   • 在variable.scss中定义的颜色变量可以直接在各个组件的scss中获取

if (process.env.STORE_THEME == "lanwo") {
  module.exports = {
    productionSourceMap: false,
    css: {
      loaderOptions: {
        sass: {
          data: `@import "~@/variable-lanwo.scss";`,
        },
      },
    },
  };
} else {
  module.exports = {
    // ...
    // publicPath:'/dist/',
    productionSourceMap: false,
    css: {
      loaderOptions: {
        sass: {
          data: `@import "~@/variable.scss";`,
        },
      },
    },
  };
}

//variable.scss
$themeColor: #f96839 !important;
$themeColorRGBA: rgba(250, 110, 93, 0.15) !important;
$themeColorDeep: #fa6e5d !important;
$priceColor: #f96839 !important;

3. 在App.vue的mounted中单独引入用于修改背景图的scss

  mounted() {
    if(process.env.STORE_THEME == "lanwo"){
      require('./lanwo.scss');
    }
  },