¿Cómo implementar la aplicación Vue?


131

¿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 ?


Debería ser parte del cli, aquí está la página del documento de implementación vuejs.org/v2/guide/deployment.html Dependiendo de la versión que tenga, la plantilla que use, probablemente diferirá un poco. Pero debe especificar que está haciendo una compilación de producción como en los documentos.
Swimburger

2
Yo uso 2.2.1 vue. Veo la documentación, pero no hay información sobre la implementación. No estoy usando nodejs en hoster. Entonces, cuando lo inicio en localhost, funciona, pero cuando descargo todos los archivos al host, no hay nada en la página
artem0071

8
Cuando realiza una compilación, probablemente compilará todos los archivos (html, css, js) en una carpeta / dist. Esta carpeta dist debe ser la raíz de su aplicación en su hosting. (No he usado Vue2 todavía, pero apuesto a que estará allí)
Swimburger

Hola chicos, tuve este mismo problema la semana pasada y escribí algo si ayuda a alguien: medium.com/@seenickcode/…
seenickcode

He subido los archivos de la carpeta dist a cpanel, pero se muestra solo en blanco
Fayaz

Respuestas:


171

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.


1
¿No hay necesidad de correr npm starto algo así?
nu everest

@nueverest si acaba de crear su proyecto con vue init webpack myprojectusted verá más instrucciones en su consola: cd myproject, npm install. Después de npm installque se descargan todos los paquetes y vue puede compilar con el npm run devservidor de desarrollo + recarga en caliente, o con npm run buildcrear un paquete desplegable.
Egor Stambakio

Esto no parece funcionar con el enrutador vue ... ¿Estoy haciendo algo mal?
Andy Hayden

1
@AndyHayden y AWS S3 comprueban si 1) índice y documento de error === index.html; 2) se establecen políticas para el sitio web estático ; 3) tu build.jsestá dentro de la distcarpeta en s3, y index.htmlestá en la raíz.
Egor Stambakio

9
La respuesta debería ser "el contenido de la distcarpeta es todo lo que necesita. No es necesario copiar /index.htmlpero sólo el index.htmlde la distes necesaria; carpeta. Además, antes de ejecutar npm run builddebe configurar la trayectoria de producción en config/index.js".
David 天宇 Wong

24

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

¿expone usted ese contenedor al exterior o usa nginx o apache como proxy?
Hakim

Sí,
usarías

paste.ubuntu.com/p/dryhSwnYh5 WORKDIR / usr / src / app puede ser WORKDIR / app? ¿También se necesita CMD ["http-server", "dist"] para servir a través del servidor http? en lugar de CMD ["npm", "start"]
LOG_TAG

Versión: webpack 3.12.0 Tiempo: 16548ms Tamaño del activo Trozos Nombres de trozos build.js 2.15 MB 0 [emitido] [grande] main build.js.map 9.74 MB 0 [emitido] main - Esto aparece después de ejecutar el cmd anterior en el proyecto carpeta: ¿puede guiarme en el siguiente paso para entrar a vivir? -
Hamendra Sunthwal

7

en tu terminal

npm run build

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


Esto supone incorrectamente que existe un script de compilación en package.json.
crash springfield

44
@crashspringfield Una suposición precisa para hacer cuando el OP pregunta específicamente sobre una aplicación Vue creada convue-cli
Dan Fletcher

4

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


Asegúrese de cambiar build: {..... assetsPublicPath: './', que los puntos antes de la barra diagonal son importantes. Pero también hay un assetsPublinPath en el objeto de desarrollo en ese archivo, así que asegúrese de cambiar el correcto.
Shane G

Versión: webpack 3.12.0 Tiempo: 16548ms Tamaño de activo Trozos Nombres de trozos build.js 2.15 MB 0 [emitido] [grande] main build.js.map 9.74 MB 0 [emitido] main - Esto aparece después de ejecutar el cmd anterior en el proyecto carpeta: ¿puede guiarme en el siguiente paso para entrar a vivir? -
Hamendra Sunthwal

2

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.


1

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


0

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.


0

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.


0

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


tiene razón, pero como lo muestra la respuesta aceptada, la pregunta era sobre qué comando ejecutar
JR Utily

0
  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.


0

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.


solo cargue la carpeta dist en su ftp y listo? y cómo acceder a la aplicación Vue en el servidor?
Hamendra Sunthwal

0

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


0

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í


0

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 vue-cli@2.x

Vue Create App

vue init webpack my-project

Ejecutar servidor de desarrollador

npm run dev

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.