mirror of
https://github.com/PanJiaChen/vue-element-admin.git
synced 2025-08-12 06:15:45 +08:00
f45a57178a
* Add support to x vversion from npm * Add support to x vversion from npm * Add support to x vversion from npm * Add documentation for current repository
221 lines
6.6 KiB
Markdown
Executable File
221 lines
6.6 KiB
Markdown
Executable File
# Compilar y Desplegar
|
|
|
|
## Compilar
|
|
|
|
Cuando se completan los proyectos, puedes compilar tu aplicación con solo ejecutar un comando:
|
|
|
|
```bash
|
|
# compilar para el entorno de producción
|
|
npm run build:prod
|
|
|
|
# compilar para el entorno de pruebas
|
|
npm run build:stage
|
|
```
|
|
|
|
Después de que el paquete de compilación sea exitoso, la carpeta `dist` se generará en el directorio raíz, que es la construcción de un archivo empaquetado, generalmente archivos estáticos como `***. js`, `***. css`, `index.html`, etc.
|
|
|
|
Si necesitas una compilación personalizada, como especificar el directorio dist, debes configurarlo a través de `outputDir` en [config](https://github.com/adempiere/adempiere-vue/blob/master/vue.config.js).
|
|
|
|
### Variables de entorno
|
|
|
|
La configuración de todos los entornos de prueba o variables de entorno formales se encuentra en el archivo `.env.xxxx` como [.env.development](https://github.com/adempiere/adempiere-vue/blob/master/.env.development).
|
|
|
|
Todos se inyectan en el contexto global a través de los complementos `webpack.DefinePlugin`.
|
|
|
|
::: tip ¡NOTA!
|
|
Las variables de entorno deben comenzar con `VUE_APP_`. Tales como: `VUE_APP_API`, `VUE_APP_TITLE`
|
|
|
|
Puedes acceder a ellas en el código de tu aplicación:
|
|
|
|
```js
|
|
console.log(process.env.VUE_APP_xxxx)
|
|
```
|
|
|
|
### Analizar el tamaño del archivo de compilación
|
|
|
|
Si tu archivo de compilación es grande, puedes optimizar tu código compilando y analizando la distribución del tamaño de los módulos dependientes utilizando `webpack-bundle-analyzer`.
|
|
|
|
```bash
|
|
npm run preview -- --report
|
|
```
|
|
|
|
Después de ejecutar, puedes ver la distribución de tamaño específico en [http://localhost:9526/report.html](http://localhost:9526/report.html)
|
|
|
|
|
|
|
|
::: tip
|
|
Se recomienda utilizar gzip, después de usarlo, el volumen será solo el 1/3 del original más o menos. También puedes usar Lazy Loading o Code Splitting.
|
|
:::
|
|
|
|
## Publicar
|
|
|
|
Para la publicación, solo tienes que publicar el archivo estático resultante después de la compilación, que generalmente es el archivo estático en la carpeta `dist`, en tu cdn o servidor estático. Ten en cuenta que `index.html` generalmente será una página de entrada para tu servicio de back-end. Es posible que debas cambiar la ruta de importación de la página después de determinar la estática para JS y CSS.
|
|
|
|
::: tip
|
|
En el despliegue puedes encontrar que la ruta del recurso es incorrecta, simplemente modifica la ruta del archivo de recurso `@/config/index.js`.
|
|
:::
|
|
|
|
```js
|
|
// los cambios se configuran según tu propia ruta
|
|
publicPath: './'
|
|
```
|
|
|
|
### Enrutador y servidor
|
|
|
|
En adempiere-vue, el enrutamiento front-end usa `vue-router`, por lo que tienes dos opciones: `browserHistory` y `hashHistory`.
|
|
|
|
Simplemente hablando, la diferencia entre ellos es el trato con el enrutamiento. `hashHistory` es procesado por la ruta que sigue de `#`, la gestión de enrutamiento de front-end a través de [HTML 5 History](https://developer.mozilla.org/en-US/docs/Web/API/History_API), y `browserHistory` es similar a nuestra ruta de acceso de página habitual, y no con `#`, pero debe a través de la configuración del servidor.
|
|
|
|
Este proyecto utiliza `hashHistory` de forma predeterminada, por lo que, si tienes `#` en tu URL y deseas deshacerte de él, debes cambiar a `browserHistory`.
|
|
|
|
Modificar el modo en `src/router/index.js`
|
|
|
|
```js
|
|
export default new Router({
|
|
// mode: 'history' // Necesita soporte de backend
|
|
})
|
|
```
|
|
|
|
::: tip
|
|
Ver detalles [vue-router document](https://router.vuejs.org/guide/essentials/history-mode.html)
|
|
:::
|
|
|
|
## Desplegar todo el Ecosistema
|
|
|
|
### Para todos los entornos, debe ejecutar las siguientes imágenes:
|
|
|
|
- [ADempiere gRPC](https://hub.docker.com/r/erpya/adempiere-grpc-all-in-one)
|
|
|
|
```shell
|
|
docker pull erpya/adempiere-grpc-all-in-one
|
|
```
|
|
|
|
- [Proxy ADempiere API](https://hub.docker.com/r/erpya/proxy-adempiere-api)
|
|
|
|
```shell
|
|
docker pull erpya/proxy-adempiere-api
|
|
```
|
|
|
|
- [ADempiere Vue](https://hub.docker.com/r/erpya/adempiere-vue)
|
|
|
|
```shell
|
|
docker pull erpya/adempiere-vue
|
|
```
|
|
|
|
- [ADempiere eCommerce](https://hub.docker.com/r/erpya/adempiere-ecommerce)
|
|
|
|
```shell
|
|
docker pull erpya/adempiere-ecommerce
|
|
```
|
|
|
|
### Ejecutar Docker Stack
|
|
|
|
```yaml
|
|
# docker-compose.yaml
|
|
version: '3.7'
|
|
|
|
services:
|
|
grpc-backend:
|
|
image: erpya/adempiere-grpc-all-in-one
|
|
container_name: adempiere-backend
|
|
stdin_open: true
|
|
tty: true
|
|
environment:
|
|
- SERVER_PORT=50059
|
|
- SERVICES_ENABLED=access; business; core; dashboarding; dictionary; enrollment; log; ui; workflow; store; pos; updater;
|
|
- SERVER_LOG_LEVEL=WARNING
|
|
- DB_HOST=postgres_host
|
|
- DB_PORT=5432
|
|
- DB_NAME=adempiere
|
|
- DB_USER=adempiere
|
|
- DB_PASSWORD=adempiere
|
|
- DB_TYPE=PostgreSQL
|
|
ports:
|
|
- 50059:50059
|
|
|
|
redis:
|
|
image: redis:4-alpine
|
|
container_name: adempiere-redis
|
|
stdin_open: true
|
|
tty: true
|
|
ports:
|
|
- '6379:6379'
|
|
|
|
es7:
|
|
image: docker.elastic.co/elasticsearch/elasticsearch:7.3.2
|
|
container_name: adempiere-eslastic-search
|
|
ulimits:
|
|
memlock:
|
|
soft: -1
|
|
hard: -1
|
|
volumes:
|
|
- ./elasticsearch.yml:/usr/share/elasticsearch/config/elasticsearch.yml:ro
|
|
ports:
|
|
- '9200:9200'
|
|
- '9300:9300'
|
|
environment:
|
|
- discovery.type=single-node
|
|
- cluster.name=docker-cluster
|
|
- bootstrap.memory_lock=true
|
|
- ES_JAVA_OPTS=-Xmx512m -Xms512m
|
|
|
|
api-rest:
|
|
image: erpya/proxy-adempiere-api
|
|
container_name: adempiere-proxy
|
|
depends_on:
|
|
- es7
|
|
- redis
|
|
stdin_open: true
|
|
tty: true
|
|
environment:
|
|
- SERVER_PORT=8085
|
|
- AD_DEFAULT_HOST=adempiere-backend
|
|
- AD_DEFAULT_PORT=50059
|
|
- ES_HOST=adempiere-eslastic-search
|
|
- ES_PORT=9200
|
|
- VS_ENV=dev
|
|
- INDEX=vue_storefront_catalog
|
|
- RESTORE_DB=N
|
|
ports:
|
|
- 8085:8085
|
|
|
|
vue-app:
|
|
image: erpya/adempiere-vue
|
|
container_name: adempiere-frontend
|
|
stdin_open: true
|
|
tty: true
|
|
environment:
|
|
- API_URL=http://adempiere-proxy:8085
|
|
ports:
|
|
- 9526:80
|
|
|
|
e-commerce:
|
|
image: erpya/adempiere-ecommerce
|
|
container_name: adempiere-ecommerce
|
|
stdin_open: true
|
|
tty: true
|
|
environment:
|
|
- SERVER_PORT=3000
|
|
- API_URL=http://adempiere-proxy:8085
|
|
- STORE_INDEX=vue_storefront_catalog
|
|
- VS_ENV=dev
|
|
ports:
|
|
- 3000:3000
|
|
```
|
|
|
|
Nota: El contenedor Elasticsearch requiere un archivo de configuración `elasticsearch.yaml`.
|
|
|
|
```shell
|
|
# requiere permisos de super usuario del sistema operativo ('su' o 'sudo')
|
|
docker-compose up
|
|
```
|
|
|
|
Contenedores de salida:
|
|
|
|
- adempiere-backend
|
|
- adempiere-redis
|
|
- adempiere-eslastic-search
|
|
- adempiere-proxy
|
|
- adempiere-frontend
|
|
- adempiere-ecommerce
|