vue.js - template - vue tutorial
¿Cómo implementar la aplicación Vue? (12)
-
npm run build: esto uglificará y minificará los códigos
-
guarde index.html y la carpeta dist en el directorio raíz de su sitio web.
-
servicio de alojamiento gratuito que puede interesarle: alojamiento de Firebase.
¿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 ?
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.
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
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.
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.
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
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" ]
Si tiene problemas con su ruta, tal vez necesite cambiar el
assetPublicPath
en su archivo
config/index.js
a su subdirectorio:
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.
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 / 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