diff options
| -rw-r--r-- | src/env/env.md | 21 | ||||
| -rw-r--r-- | vue.config.js | 21 |
2 files changed, 27 insertions, 15 deletions
diff --git a/src/env/env.md b/src/env/env.md index 92c3f236..191cd045 100644 --- a/src/env/env.md +++ b/src/env/env.md @@ -26,12 +26,13 @@ VUE_APP_ENV_NAME=ibm >[Vuex store modules](https://vuex.vuejs.org/guide/modules.html) contain the application's API calls. -1. Create a `<ENV_NAME>.js` file in `src/env/store` +1. If making customizations to the default store, add `CUSTOM_STORE=true` key value pair to the new .env file. +2. Create a `<ENV_NAME>.js` file in `src/env/store` >The filename needs to match the `VUE_APP_ENV_NAME` value defined in the .env file. The store import in `src/main.js` will resolve to this new file. -2. Import the base store -3. Import environment specific store modules -4. Use the [Vuex](https://vuex.vuejs.org/api/#registermodule) `registerModule` and `unregisterModule` instance methods to add/remove store modules -5. Add default export +3. Import the base store +4. Import environment specific store modules +5. Use the [Vuex](https://vuex.vuejs.org/api/#registermodule) `registerModule` and `unregisterModule` instance methods to add/remove store modules +6. Add default export Example `src/env/store/ibm.js`: @@ -48,9 +49,10 @@ export default store; >[Vue Router](https://router.vuejs.org/guide/) determines which pages are accessible in the UI. -1. Create a `<ENV_NAME>.js` file in `src/env/router` +1. If making customizations to the default router, add `CUSTOM_ROUTER=true` key value pair to the new .env file. +2. Create a `<ENV_NAME>.js` file in `src/env/router` >The filename needs to match the `VUE_APP_ENV_NAME` value defined in the .env file. The router import in `src/main.js` will resolve to this new file. -2. Import the base router +3. Import the base router 4. Use the [Vue Router](https://router.vuejs.org/api/#router-addroutes) `addRoutes` instance method to define new routes 5. Add default export @@ -83,9 +85,10 @@ export default router; >[Bootstrap theming](https://getbootstrap.com/docs/4.5/getting-started/theming/) allows for easy visual customizations. -1. Create a `_<ENV_NAME>.scss` partial in `src/env/assets/styles` +1. If making customizations to the default styles, add `CUSTOM_STYLES=true` key value pair to the new .env file. +2. Create a `_<ENV_NAME>.scss` partial in `src/env/assets/styles` >The filename needs to match the `VUE_APP_ENV_NAME` value defined in the .env file. The webpack sass loader will attempt to import a file with this name. -2. Add style customizations. Refer to [bootstrap documentation](https://getbootstrap.com/docs/4.5/getting-started/theming/) for details about [color overrides](https://getbootstrap.com/docs/4.5/getting-started/theming/#variable-defaults) and [other customizable options](https://getbootstrap.com/docs/4.5/getting-started/theming/#sass-options). +3. Add style customizations. Refer to [bootstrap documentation](https://getbootstrap.com/docs/4.5/getting-started/theming/) for details about [color overrides](https://getbootstrap.com/docs/4.5/getting-started/theming/#variable-defaults) and [other customizable options](https://getbootstrap.com/docs/4.5/getting-started/theming/#sass-options). Example for adding custom colors diff --git a/vue.config.js b/vue.config.js index 81763622..1e17def0 100644 --- a/vue.config.js +++ b/vue.config.js @@ -6,7 +6,9 @@ module.exports = { sass: { prependData: () => { const envName = process.env.VUE_APP_ENV_NAME; - if (envName !== undefined) { + const hasCustomStyles = + process.env.CUSTOM_STYLES === 'true' ? true : false; + if (hasCustomStyles && envName !== undefined) { // If there is an env name defined, import Sass // overrides. // It is important that these imports stay in this @@ -14,7 +16,7 @@ module.exports = { // take precedence over the default BMC styles return ` @import "@/assets/styles/bmc/helpers"; - @import "@/env/assets/styles/_${process.env.VUE_APP_ENV_NAME}"; + @import "@/env/assets/styles/_${envName}"; @import "@/assets/styles/bootstrap/_helpers"; `; } else { @@ -51,6 +53,8 @@ module.exports = { productionSourceMap: false, configureWebpack: config => { const envName = process.env.VUE_APP_ENV_NAME; + const hasCustomStore = process.env.CUSTOM_STORE === 'true' ? true : false; + const hasCustomRouter = process.env.CUSTOM_ROUTER === 'true' ? true : false; if (process.env.NODE_ENV === 'production') { config.plugins.push( @@ -59,11 +63,16 @@ module.exports = { }) ); } + if (envName !== undefined) { - // Resolve store and router modules in src/main.js - // depending on environment (VUE_APP_ENV_NAME) variable - config.resolve.alias['./store$'] = `./env/store/${envName}.js`; - config.resolve.alias['./router$'] = `./env/router/${envName}.js`; + if (hasCustomStore) { + // If env has custom store, resolve store module in src/main.js + config.resolve.alias['./store$'] = `./env/store/${envName}.js`; + } + if (hasCustomRouter) { + // If env has custom router, resolve router module in src/main.js + config.resolve.alias['./router$'] = `./env/router/${envName}.js`; + } } }, chainWebpack: config => { |