Cómo implementar la aplicación Vue?

Si has creado tu proyecto usando:

vue init webpack myproject

Necesitas establecer tu NODE_ENV en producción y ejecutar, porque el proyecto tiene web pack configurado tanto para desarrollo como para producción:

NODE_ENV=production npm run build

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

Si está implementando con Docker, necesitará 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" ]

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

En su terminal

npm run build

Y alojas la carpeta dist. para más ver este video

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 buscar e ir dentro de la carpeta generada llamada 'dist'.
A continuación, comience a enviar todos esos archivos a su servidor.

Una forma de hacer esto sin usar VUE-CLI es agrupar todos los archivos de script en un archivo js fat y luego hacer referencia a ese archivo javascript big fat en el archivo de plantilla principal.

Prefiero usar webpack como un bundler y crear un webpack.conig.js en el directorio raíz del proyecto. Todas las configuraciones como punto de entrada, archivo de salida, cargadores, etc.. están todos almacenados en ese archivo de configuración. Después de eso, agrego un script en el paquete.archivo json que utiliza webpack.config.js archivo para webpack configs y comience a ver archivos y cree un archivo Js incluido en la ubicación mencionada en webpack.config.archivo js.

Creo que puedes usar vue-cli

Si está utilizando la CLI de Vue junto con un framework backend que maneja activos estáticos como parte de su implementación, todo lo que necesita hacer es asegurarse de que la CLI de Vue genere los archivos construidos en la ubicación correcta y, a continuación, siga las instrucciones de implementación de su framework backend.

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 construido en el directorio dist en cualquier servidor de archivos estáticos, pero asegúrese de establecer el baseUrl

La mejor y más limpia manera de hacerlo, es importar el proyecto en su servidor y ejecutar npm run build desde el terminal de su servidor, después de instalar todos los módulos y dependencias de su proyecto. Más tarde puede crear algún script en su package.json y darle un comando como npm run deploy para implementarlo automáticamente desde su máquina local.

De esta manera, no tendrá problemas con vue-router (a menos que no haya configurado su proyecto correctamente) y tampoco necesitará "mover su índice".html and / dist / folder".