一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。
要解决的问题
接手了一个后台管理系统项目，是基于若依的后台管理系统开发的，之前一直关闭了eslint，或者说是在.eslintignore文件里忽略了js和vue文件，所以一直没有eslint的警告。
目前估计是要做代码优化了，所以要把eslint开起来；但是若依这个开源项目应该有eslint配置的，如果把.eslintignore的配置去除，那告警应该生效了。
但是经过一番操作下来，命令行的eslint警告提示已经有了，但是浏览器却没有eslint的警告提示，因此不断纠结了两天。
答案
原因是index.html中的一个meta标签
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
这个meta标签的说明： Content Security Policy 入门教程 - 阮一峰的网络日志 (ruanyifeng.com)
可以看到eslint的警告是由webpack用iframe添加到页面上的，
因此上述meta标签会iframe无法嵌入
走进科学的过程
歪路一
第一个想法是vue.config.js是不是少配置了eslint相关的东西
lintOnSave这项配置是有的，并且判断的dev环境才开启
后面补充了devServer的配置
devServer: {
overlay: {
warnings: true,
errors: true
},
},
注释.eslintignore的内容，再加上上述配置，命令行的eslint警告是出来了
歪路二
继续纠结为什么浏览器没有eslint的警告提示
开始怀疑是.eslintrc.js配置有问题
看了eslint官网的配置教程：Getting Started with ESLint - ESLint中文文档 (bootcss.com)
可以在命令行敲./node_modules/.bin/eslint --init重新配置eslint
一番操作之后，.eslintrc.js的配置也更新了，需要的npm模块都下载了
重启项目之后依旧还是没有浏览器的eslint提示
歪路三
删除node_modules，重新安装；使用nvm切换node版本，都尝试过之后，依旧没用
想着再新建一个demo项目对比一下哪里有差别
对比之下有些npm模块的版本不一样，尝试把项目中的文件迁移到demo上跑，发现src目录下的文件迁移进来之后，浏览器的eslint警告还是有的
因此最后迁移public文件夹后，发现告警就没了，不在浏览器展示了
思考会不会是某些css影响了呢，把所有的style注释了，不行
继续注释script标签和js代码，不行
public文件夹只留index.html文件，还是不行
替换回原来的index.html，eslint的提示回来了
由此，对比两个index.html文件，发现有多条不一样的meta标签
最终定位到是<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
最后的配置
<% if(process.env.NODE_ENV !== 'development'){ %>
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<% } %>
疑问：<% %>这种语法叫什么
(8 封私信 / 56 条消息) html中<％％>、<％=％>的使用问题？ - 知乎 (zhihu.com)
补充
如果在vue.config.js中配置了devServer的host为0.0.0.0，正常来说是可以用ip访问项目的，但是配置了<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">之后，用ip访问会打不开。
题外
在项目录入vue inspect > output.js可以查看当前项目的webpack配置
(23条消息) vue-cli3查看webpack默认配置_夏狗花花的博客-CSDN博客_查看vue的webpack配置
