Empaquetado de proyectos e implementación en línea

Cuál es el número de puerto predeterminado: 80

Para compilar el proyecto, ejecute el comando package.json de

Cada vez que se ejecute, se generará un archivo dist en el directorio raíz del proyecto, si lo hay, elimínelo y vuelva a crearlo.

Simulación local en línea/prueba

Utilice nginx para simular el entorno de producción

es un servidor web proxy inverso y HTTP de alto rendimiento

Tenga en cuenta que la ruta donde se encuentra nginx en su propia computadora no puede usar chino

2. Después de modificar el archivo de configuración (nginx.conf), asegúrese de reiniciar nginx

3. No haga doble clic varias veces, siempre que haya dos nginx en el administrador de tareas. Al finalizar nginx, haga clic derecho para finalizar cuál de los siguientes (subproceso, luego finalice el proceso principal anterior)

En este archivo nginx actualmente solo usamos dos archivos

Archivo nginx-1.17.6\conf\nginx.conf: para configurar el servidor nginx

nginx-1.17.6\logs\error.log Cuando nuestro nginx comienza a informar un error, puede ir aquí para ver el error

Primero, veamos el archivo de configuración: los comentarios en el archivo de configuración son todos #

El proyecto se implementa en el directorio raíz.

server { 
        listen 8887; #Número de puerto de escucha 
        server_name localhost; #Acceder a 
        la ubicación de la dirección / { #Acceder al directorio raíz de este servidor 
            root html; #Acceder a la ruta del proyecto 
            index.html index.htm; #Acceder al archivo debajo del ruta 
            try_files $uri $uri/ /index.html descanso; 
        } 
 }

Haga doble clic/línea de comando para ejecutar el archivo nginx.exe

Abra el administrador de tareas y verifique si este archivo existe para demostrar que el inicio se realizó correctamente

Luego visite http://localhost:8887 de acuerdo con la configuración anterior   y cargará el contenido en la carpeta html Solo necesitamos copiar los elementos en el directorio dist después de empaquetar y compilar a la siguiente dirección para acceder

El proyecto se implementa en el subdirectorio/subaplicación

server { 
        listen 8887; #Número de puerto de escucha 
        server_name localhost; #Acceder a 
        la ubicación de la dirección /suming { #Acceder al subdirectorio del proyecto en la carpeta /suming en el directorio raíz del servidor 
            #root "E:/1711A/newnear_pro/dist" ; # Ruta raíz de acceso 
            #root "E:/1907A/bwonline/dist"; #Ruta raíz de acceso 
             root html; 
            index index.html index.htm; #¿Cuál es la página de inicio debajo de la ruta raíz llamada 
           try_files $uri $uri/ / sumando/index.html; 
        } 
 }

1. En la configuración de nginx, se debe agregar la ruta del archivo raíz apuntado por los siguientes try_files con la ruta del subdirectorio/suming

2 En la configuración del paquete web del proyecto (vue.config.js), agregue la configuración empaquetada al directorio raíz

3. Agregue una base debajo de la carpeta de enrutamiento

const router = new VueRouter({ 
  mode: 'history', 
  base: '/suming', //Vue se produce al buscar componentes en el directorio raíz de nginx. Por lo tanto, debe modificar el punto de inicio de la búsqueda de rutas 
  // base: proceso.env.BASE_URL,

module.exports = defineConfig({ 
  publicPath: process.env.NODE_ENV === 'producción' ? '/suming' : '/', 
})

4: cree una nueva carpeta de subaplicación en el directorio raíz de nginx o agregue una configuración de paquete web

cargar servidor

Subir nuestro proyecto al servidor requiere una herramienta de manejo: FileZilla  (la misma herramienta también tiene FTP XShell ssh pwoershell, solo necesitas recordar fileZilla)

 La empresa también te dirá dónde se subirá tu proyecto:

En mi servidor /www/wwwroot/www.lovetang.top/CRMEB-master/crmeb/public

Por supuesto, también puede vincularse al servidor a través de la línea de comandos (no recomendado)

sftp [email protected] Cuando ingresa la contraseña, no puede ver la entrada, porque un mecanismo de autoprotección de linux es invisible

Problemas encontrados durante el lanzamiento del proyecto:

1. Nuestra empresa está en modo historial. Cuando se inicia el proyecto, se informará un error 404 cuando se actualice el proyecto. En ese momento, encontré una solución en Internet y configuré try_files para nginx. De hecho, es equivalente cuando la página se actualiza, redirigiendo a la página raíz, analizando la tabla de enrutamiento, en lugar de analizarla como una carpeta

El enrutamiento se divide en dos modos: hash e historial, entre ellos, 404 se informará solo cuando el historial esté en línea.