Tutorial de implementación de paquetes de proyectos Vue y errores comunes: desarrollo front-end

Tabla de contenido

Reglas generales

Embalar

desplegar

        1. Al implementar aplicaciones front-end de forma estática o independiente del back-end

        2. Cuando la CLI de Vue procesa recursos estáticos y funciona con el marco de back-end como parte de la implementación

errores comunes

1. Errores causados ​​por publicPath

2. Usa Vue Route en modo historial

3. Complemento PAW

Reglas generales

---

Embalar

        Obviamente cuando usamos vue scaffolding ya tenemos node.js

        Use el comando  npm run build directamente

       Luego podemos encontrar el archivo dist en el archivo del proyecto, que es el proyecto empaquetado

desplegar

        1. Al implementar aplicaciones front-end de forma estática o independiente del back-end

        En este punto, puede implementar directamente los archivos en el dist en la ruta raíz del servidor. Tenga en cuenta que los archivos en el dist solo se pueden implementar en la ruta raíz de forma predeterminada (es decir, solo se pueden colocar en " www.xxx.com/ ", por ejemplo, no en " www.xxx.com/a "), si no hace esto, el proyecto vue no funcionará correctamente.

        Si desea implementar el proyecto en un directorio que no sea raíz, debe modificar el vue.config.js del proyecto original (y luego empaquetarlo)

        Necesitamos usar el parámetro publicPath, su valor predeterminado es '/', que es la ruta raíz

        Modificar en vue.config.js:

module.exports = defineConfig({
  publicPath : './'
})

        ' ./ ' o ' ' pueden establecer todos los recursos en rutas relativas, de modo que puedan implementarse en cualquier ruta después del empaquetado

        Por supuesto, también se puede configurar en la ruta de implementación correspondiente, como

部署在https://www.my-app.com/my-app/, establecido publicPathen /my-app/.

         Sin embargo, tenga en cuenta que en las siguientes situaciones, intente utilizar la ruta correspondiente en lugar de ruta relativa al implementar:                 

• Al usar history.pushStateenrutamiento basado en HTML5

• pagesAl crear una aplicación de varias páginas con la opción

        2. Cuando la CLI de Vue procesa recursos estáticos y funciona con el marco de back-end como parte de la implementación

        En este punto, solo necesita asegurarse de que los archivos de compilación generados por Vue CLI estén en la ubicación correcta y sigan el método de lanzamiento del marco de back-end.

errores comunes

---

1. Errores causados ​​por publicPath

2. historyUse Vue Route en modo

En este punto, el servidor del entorno de producción debe configurarse para retroceder cualquier solicitud que no coincida con los archivos estáticos. index.html

可参考

3. Complemento PAW

Al usar PAW, se debe usar HTTPS para un uso normal