Acceso al nombre de dominio para el proyecto vue

Durante el desarrollo de Vue, a menudo nos encontramos con varios problemas de interfaz. Recientemente, encontré un problema en el proyecto: las rutas de interfaz del entorno de desarrollo y en línea son diferentes. Encontramos muchos blogs en Internet, la mayoría de ellos son el mismo copiar y pegar, lo que puede ser difícil de entender para los principiantes, así que escribí este blog para compartir una idea detallada de configuración de la interfaz con los estudiantes de primer año de Xiaomeng que acaban de usar Vue para hacer proyectos.

Webpack proporciona dos archivos de configuración para el entorno de producción y el entorno en línea. Por lo general, se utiliza una interfaz durante el desarrollo y cambiará automáticamente a otra interfaz después de que el proyecto esté en línea. Sin más preámbulos, aquí tenéis la imagen de abajo. El primer paso es encontrar dev.env.js en la carpeta de configuración del proyecto vue-cli. Los valores predeterminados son los siguientes:

Luego debemos agregar el nombre de dominio de la interfaz utilizado en el entorno de desarrollo para solicitar datos de fondo, como se muestra a continuación:

Url_api se establece mediante Yo mismo y se puede personalizar. Las siguientes rutas son interfaces dentro de su propio entorno de desarrollo.

Luego busque prod.env.js, el valor predeterminado es el siguiente:

En este archivo, también se agrega la configuración de la interfaz de solicitud en línea:

Finalmente, llame a esta interfaz en sus propios axios empaquetados:

Variable personalizada = process.env.url_api (esto simplemente se personaliza en el archivo de configuración) y empalme la URL en los axios empaquetados. Finalmente, cuando npm ejecuta dev en el entorno de producción, llamará automáticamente a la interfaz recién definida en dev.env.js. Cuando npm ejecute build to package, llamará automáticamente a la interfaz configurada en prod.env.js.

Además: problemas entre dominios.

? Es posible que algunos amigos hayan configurado un proxy entre dominios en Vue, lo que provocó que el proxy en la URL empalmada falle y aún se produzcan problemas entre dominios. Mi idea personal para resolver este problema es que la configuración del proxy permanezca sin cambios y simplemente reemplazar la interfaz local con una cadena vacía en dev.env.js para evitar problemas entre dominios en el entorno de desarrollo. Si no lo entiendes, puedes preguntarme. Si hay una solución mejor, espero que puedan darme sus opiniones. Gracias.

Enlace:/p/6393cf897663