Estoy trabajando en una aplicación web Vue 3 que se crearía e implementaría para varios clientes. Cada cliente tiene su propio título, logotipo, icono, etc.
Lo que necesito es crear la aplicación para cada cliente con su información específica (digamos que muestre la información del cliente en el componente TheFooter.vue ).
El requisito importante es que cuando la aplicación se cree para un cliente, la información de otros clientes NO DEBE incluirse en los archivos creados finales (me refiero a la carpeta /dist después de ejecutar npm run build ) por razones de privacidad.
Las formas en que lo intenté:
const customers = { CUSTOMER_A: { title: 'Customer A', logo: 'assets/customer_a_logo.png', // other privacy related data }, CUSTOMER_B: { title: 'Customer B', logo: 'assets/customer_b_logo.png', // other privacy related data } export default const customer[process.env.VUE_APP_CURRENT_CUSTOMER] luego, en el archivo .env , cree una clave VUE_APP_CURRENT_CUSTOMER con un valor como CUSTOMER_A , CUSTOMER_B ,...
Y en TheFooter.vue importe datos de clientes como este:
const customer = require('./customers.js').default
pero de esta manera analicé el js final construido en la carpeta /dist y la información de otros clientes estaba disponible.
Basado en los modos Vue CLI , para cada cliente cree un archivo .env.customer_x y agregue datos específicos del cliente en él, luego, cuando construya la aplicación, se referirá al cliente actual con el indicador --mode (por ejemplo vue-cli-service build --mode customer_x ). Si los clientes son demasiados, terminaríamos con demasiados archivos .env.customer_.... (¿Alguna otra advertencia para esta solución?)
Cree un archivo json (por ejemplo, clients.json) y utilícelo en TheFooter.vue así:
import { process.env.VUE_APP_CURRENT_CUSTOMER } from './customers.json'
Pero parece que no es posible usar la variable dentro de la declaración de importación, y necesito usar variables env (para la canalización ci/cd)
¿Hay alguna idea o mejores prácticas para este problema?
¡gracias de antemano!
Es básicamente un proceso de dos pasos para generar múltiples compilaciones.
Escriba un script de compilación personalizado que invoque Webpack mediante programación. Algo como esto:
// build.js file const webpack = require('webpack'); // Your webpack.config.js should export a function instead of config. const webpackConfig = require('./webpack.config.js'); // You can require this data from other `customers.js` file. const customers = [ { title: 'App 1' }, { title: 'App2' } ]; customers.forEach((customer) => { // Get webpack configuration for this customer. const config = webpackConfig(customer); // Invoke the webpack webpack(config, (err) => { /** Handle error here */ }); });Su configuración de Webpack estaría envuelta en una función de devolución de llamada:
// webpack.config.js module.exports = (customer) => { // This function will be called from build.js file. return { entry: 'index.js', output: { // ... } // ...other webpack configuration }; }; Use Webpack DefinePlugin o algún otro medio para inyectar estos datos en su código JavaScript real. Para las páginas HTML, puede usar webpack-html-plugin que también admite esta característica usando plantillas. Lo necesitará para establecer <title> y otros metadatos HTML para la compilación de su cliente.
new webpack.DefinePlugin({ CUSTOMER_DATA: JSON.stringify(customer) }); Además, este script de compilación debe optimizarse para manejar la async y también garantizar que el directorio de salida se ajuste adecuadamente para cada cliente.
Como mejora adicional, Webpack también admite la configuración de arreglos (configuraciones múltiples ) para crear varias compilaciones. Puede usarlo, ya que proporciona compilaciones paralelas listas para usar y sin necesidad de un archivo build.js por separado. Personalmente, me gusta mantener las cosas separadas/modulares y, por lo tanto, explicarlas de esa manera.
La clave para comprender aquí es que en su código real, no debe importar en ninguna parte este archivo customers.js . Es una cosa del tiempo de compilación y debe importarse solo en scripts de tiempo de compilación.