vue.js - template - vue tutorial

¿Cómo implementar la aplicación Vue?

Question

¿Qué debo hacer después de desarrollar una aplicación Vue con vue-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 ?

Answer 1

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.

Answer 2

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.

Answer 3

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 back-end, es decir, su back-end 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

Answer 4

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.

Answer 5

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.

Answer 6

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 como vue-cli-plugin-s3-deploy

Answer 7

Si ha creado su proyecto usando:

vue init webpack myproject

NODE_ENV configurar su NODE_ENV en producción y ejecución, porque el proyecto tiene un paquete web configurado para el desarrollo y la producción:

NODE_ENV=production npm run build

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

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

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" ]

Answer 8

Si tiene problemas con su ruta, tal vez necesite cambiar el assetPublicPath en su archivo config/index.js a su subdirectorio:

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

Answer 9

Una forma de hacer esto 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.

Answer 10

en tu terminal

npm run build

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

Answer 11

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.

Answer 12

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 / lo que sea.

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