carga del proyecto vue a la vista previa de Github

¿Qué debemos hacer cuando hemos creado un proyecto usando vue-cli y finalmente queremos subirlo a Github para obtener una vista previa de los resultados?

Primero, después de completar el proyecto Vue, antes de cargarlo en Github, debes cambiar algunas configuraciones para obtener una vista previa del proyecto a través de la página de Github.

Abra el archivo index.js en la carpeta de configuración en el directorio raíz del proyecto y realice los siguientes cambios:

Ver activosPublicPath en compilación (también hay un desarrollador en la parte superior, que es la configuración del entorno de desarrollo en , no es necesario cambiarla). './'

La ruta background-img escrita en CSS es incorrecta. Debe encontrar utils.js en la carpeta de compilación y cambiar la ubicación. Abra el archivo utils.js en la carpeta de compilación raíz, agregue publicPath: '.../.../...',

Abra webpack.prod.conf.js en el archivo de la carpeta de compilación, busque minify en el nuevo HtmlWebpackPlugin en webpack.prod.conf.js y cambie removeAttributeQuotes: true en minify para removeAttributeQuotes: true. true cambió a removeAttributeQuotes:false

1. Ingrese al directorio y ejecute el comando npm run build para empaquetar el proyecto

1. Cree un nuevo almacén en github,

2. Cargue todo el proyecto en github y luego ejecute la siguiente línea de comando

Ahora aún no puede obtener la vista previa en línea del proyecto, haga clic en el elemento de configuración del proyecto y luego busque la página de Github

Seleccione la rama principal, guarde y luego verá el enlace de vista previa en línea del proyecto, haga clic en el enlace

En este momento, verá que la página está en blanco, no No se preocupe, agregue dist (porque index.index.html está en el directorio dist), ingrese, OK, aparecerán los resultados de la página en línea.

(Elimine la carpeta dist local, luego cárguela en github y actualice la rama maestra)

operación de línea de comando de git:

Aquí, debe elegir gh- bifurca las páginas y haz clic en Conectar. Si ves una página en blanco en este momento, no te preocupes, solo espera un momento (el contenido tardará un tiempo en actualizarse). Ahora mire la rama principal del repositorio, la carpeta dist ya no existe, y mire la dirección de vista previa en línea, es perfecta.

Intentemos abrir index.html en un navegador.

¿Está la página en blanco? Cuando abrimos la consola, encontraremos que la ruta a la etiqueta del script no parece ser correcta, porque la carpeta estática está en el mismo directorio que index.html, pero aquí estamos introduciendo el archivo estático desde el directorio raíz. y la ruta correcta debe ser ./ La ruta correcta debe ser una ruta relativa que comience con ./static/...' o src='static/...'.

De hecho, esto está relacionado con la ruta del recurso de configuración. Abra index.js en la carpeta de configuración del directorio raíz del proyecto, busque activosPublicPath: '/' en compilación y cámbielo a activosPublicPath: