¿Qué debo hacer después de desarrollar una aplicación Vuevue-cli ?

En Angular había algún comando que agrupaba todos los scripts en un solo script, y luego estos archivos se envían al host.

¿Hay algo igual en Vue ?

Creo que has creado tu proyecto así:

vue init webpack myproject

Bueno, ahora puedes correr

npm run build

Copie la carpeta index.html y / dist / en el directorio raíz de su sitio web. Hecho.

Si ha creado su proyecto usando:

vue init webpack myproject

Debería configurar su NODE_ENVproducción y ejecución, porque el proyecto tiene un paquete web configurado tanto para el desarrollo como para la producción:

NODE_ENV=production npm run build

Copie el dist/directorio en el directorio raíz de su sitio web.

Si está implementando con Docker, necesitaría un servidor express que sirva el dist/directorio.

Dockerfile

FROM node:carbon

RUN mkdir -p /usr/src/app

WORKDIR /usr/src/app
ADD . /usr/src/app
RUN npm install

ENV NODE_ENV=production

RUN npm run build

# Remove unused directories
RUN rm -rf ./src
RUN rm -rf ./build

# Port to expose
EXPOSE 8080
CMD [ "npm", "start" ]

en tu terminal

npm run build

y aloja la carpeta dist. para más ver este video

Si tiene problemas con su ruta, tal vez necesite cambiarla assetPublicPathen su config/index.jsarchivo a su subdirectorio:

http://vuejs-templates.github.io/webpack/backend.html

Los comandos para qué códigos específicos ejecutar se enumeran dentro de su archivo package.json en scripts. Aquí hay un ejemplo mío:

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

Si está buscando ejecutar su sitio localmente, puede probarlo con

npm serve

Si está buscando preparar su sitio para la producción, usaría

npm build

Este comando generará una carpeta dist que tiene una versión comprimida de su sitio.

Para implementar su aplicación en un entorno de producción, agregue

"build": "vue-cli-service build --mode prod"

en sus scripts en el archivo package.json.

Abra su main.js y agregue

Vue.config.productionTip = false;

justo después de sus importaciones. Luego abra su cli en la carpeta del proyecto y ejecute este comando

npm run build

Esto creará una carpeta dist en el directorio de su proyecto. Puede cargar esa carpeta dist en su host y su sitio web estará activo

Este comando es para iniciar el servidor de desarrollo:

npm run dev

Donde este comando es para la compilación de producción:

npm run build

Asegúrese de mirar e ir dentro de la carpeta generada llamada 'dist'.
Luego comience a enviar todos esos archivos a su servidor.

Una forma de hacerlo sin usar VUE-CLI es agrupar todos los archivos de script en un solo archivo js gordo y luego hacer referencia a ese gran archivo javascript grueso en el archivo de plantilla principal.

Prefiero usar webpack como un paquete y crear un webpack.conig.js en el directorio raíz del proyecto. Todas las configuraciones, como el punto de entrada, el archivo de salida, los cargadores, etc., se almacenan en ese archivo de configuración. Después de eso, agrego un script en el archivo package.json que usa el archivo webpack.config.js para las configuraciones de webpack y empiezo a mirar archivos y creo un archivo Js en la ubicación mencionada en el archivo webpack.config.js.

Creo que puedes usar vue-cli

Si está utilizando Vue CLI junto con un marco de back-end que maneja activos estáticos como parte de su implementación, todo lo que necesita hacer es asegurarse de que Vue CLI genere los archivos compilados en la ubicación correcta y luego siga las instrucciones de implementación de su marco de back-end .

Si está desarrollando su aplicación frontend por separado de su backend, es decir, su backend expone una API para que su frontend hable, entonces su frontend es esencialmente una aplicación puramente estática. Puede implementar el contenido creado en el directorio dist en cualquier servidor de archivos estático, pero asegúrese de configurar la baseUrl correcta

1. npm run build: esto uglificará y minificará los códigos

2. guarde index.html y la carpeta dist en el directorio raíz de su sitio web.

3. servicio de alojamiento gratuito que puede interesarle: alojamiento de Firebase.

si utilizó vue-cli y webpack cuando creó su proyecto.

puedes usar solo

npm ejecuta el comando de compilación en la línea de comando y creará la carpeta dist en tu proyecto. Simplemente cargue el contenido de esta carpeta en su ftp y listo.

ESTO ES PARA DESPLEGARSE EN UNA CARPETA PERSONALIZADA (si desea que su aplicación no esté en la raíz, por ejemplo, URL / myApp /). Busqué durante mucho tiempo encontrar esta respuesta ... espero que ayude a alguien.

Obtenga la CLI de VUE en https://cli.vuejs.org/guide/ y use la compilación de la interfaz de usuario para que sea más fácil. Luego, en la configuración, puede cambiar la ruta pública a / whatever / y vincularla a URL / whatever.

Vea este video que explica cómo crear una aplicación vue usando CLI si necesita más ayuda: https://www.youtube.com/watch?v=Wy9q22isx3U

La documentación de vue proporciona mucha información sobre esto sobre cómo puede implementar en diferentes proveedores de host.

npm run build

Puede encontrar esto en el archivo json del paquete. sección de guiones. Proporciona scripts para pruebas y desarrollo y construcción para producción.

Puede utilizar servicios como netlify que agruparán su proyecto al vincular su repositorio github del proyecto desde su sitio. También proporciona información sobre cómo implementar en otros sitios como heroku.

Puedes encontrar más detalles sobre esto aquí

Primero instale Vue Cli a nivel mundial

npm install -g @vue/cli

Para crear un nuevo proyecto, ejecute:

vue create project-name

ejecutar vue

npm run serve 

Vue CLI> = 3 utiliza el mismo binario vue, por lo que sobrescribe Vue CLI 2 (vue-cli). Si aún necesita la funcionalidad heredada vue init, puede instalar un puente global:

Vue Init Globalmente

npm install -g @vue/cli-init

vue init ahora funciona exactamente igual que [email protected]

Vue Create App

vue init webpack my-project

Ejecutar servidor de desarrollador

npm run dev

Si desea compilar y enviar a su servidor remoto, puede usar cli-service ( https://cli.vuejs.org/guide/cli-service.html ), puede crear tareas para servir, construir y una para implementar con algunos complementos específicos comovue-cli-plugin-s3-deploy