Recuerde un proyecto Vue para iniciar el proceso de eslint

¡Acostúmbrate a escribir juntos! Este es el segundo día de mi participación en el "Nuggets Daily New Plan · April Update Challenge", haz clic para ver los detalles del evento .

problema a resolver

Me hice cargo de un proyecto de sistema de gestión en segundo plano, que se desarrolló en base al sistema de gestión en segundo plano de Ruoyi. Siempre he cerrado eslint antes, o he ignorado los archivos js y vue en el archivo .eslintignore, por lo que no ha habido ninguna advertencia de eslint.

En la actualidad se estima que se va a realizar una optimización de código, por lo que se debe habilitar eslint, pero si este proyecto de código abierto debe tener configuración de eslint, si se elimina la configuración de .eslintignore, la alarma debería dar la alarma.

Pero después de algunas operaciones, el mensaje de advertencia de eslint en la línea de comandos ya existe, pero el navegador no tiene ningún mensaje de advertencia de eslint, por lo que he estado luchando durante dos días.

Responder

El motivo es una metaetiqueta en index.html

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
复制代码

Descripción de esta metaetiqueta: Tutorial de introducción a la política de seguridad de contenido: registro web de Ruanyifeng (ruanyifeng.com)

Se puede ver que la advertencia de eslint se agrega a la página mediante webpack con iframe, por lo que la metaetiqueta anterior no podrá incrustar el iframewebpakc-dev-server-client-overlay.png

El proceso de ingreso a la ciencia.

Camino distorsionado uno

El primer pensamiento es vue.config.jssi hay menos configuración de cosas relacionadas con eslint.

La configuración de lintOnSave está disponible y el entorno de desarrollo juzgado está habilitado

La configuración de devServer se agrega más tarde.

devServer: {
  overlay: {
    warnings: true,
    errors: true
  },
},
复制代码

El contenido del comentario .eslintignore, junto con la configuración anterior, la advertencia de eslint en la línea de comando está fuera

Camino distorsionado dos

Continúe preguntándose por qué el navegador no tiene un mensaje de advertencia de eslint

Empezar a sospechar que .eslintrc.jshay un problema de configuración

Lea el tutorial de configuración en el sitio web oficial de eslint: Getting Started with ESLint - Documentación en chino de ESLint (bootcss.com)

./node_modules/.bin/eslint --initPuede reconfigurar eslint en la línea de comando

imagen.png

Después de algunas operaciones, .eslintrc.jsla configuración también se actualiza y se descargan los módulos npm necesarios.

Después de reiniciar el proyecto, todavía no hay un indicador de eslint del navegador

camino torcido tres

Elimine node_modules y vuelva a instalarlo; use nvm para cambiar la versión del nodo, después de todo lo intentado, sigue siendo inútil

Pensando en crear un nuevo proyecto de demostración para comparar la diferencia

imagen.png

Por el contrario, las versiones de algunos módulos npm son diferentes. Intente migrar los archivos del proyecto a la demostración para que se ejecute y descubra que después de migrar los archivos en el directorio src, todavía hay advertencias de eslint en el navegador.

Por lo tanto, después de la migración final publicde la carpeta, se descubrió que la alarma había desaparecido y no se mostraba en el navegador.

Pensando si podría estar afectado por algún css, comenté todos los estilos, no

Continúe comentando etiquetas de script y código js, ​​no

publicLa carpeta solo deja el archivo index.html, sigue sin funcionar

Reemplace el index.html original, y el aviso de eslint está de vuelta

Por lo tanto, al comparar los dos archivos index.html, se encuentra que hay muchas etiquetas meta diferentes

La ubicación final es<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

configuración definitiva

<% if(process.env.NODE_ENV !== 'development'){ %>
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<% } %>
复制代码

Pregunta: <% %>¿cómo se llama esta sintaxis?

(8 mensajes privados / 56 mensajes) ¿El uso de <%%> y <%=%> en html? -Zhihu (zhihu.com)

sin relación

En la entrada del proyecto vue inspect > output.js, puede ver la configuración del paquete web del proyecto actual

(23 mensajes) vue-cli3 ver la configuración predeterminada del paquete web - Se busca programador

Supongo que te gusta

Origin juejin.im/post/7082687474085920805
Recomendado
Clasificación