如何通过检查HTML源码验证路易威登官网采用Vue开发及其他框架查验方法

验证站点使用Vue开发的具体线索 #

你提到的<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>这类直接引入CDN版Vue的代码，只会出现在未做工程化打包、直接外链引入框架的小型项目里。路易威登这类商业站点都是用Webpack/Vite等构建工具将Vue框架代码和业务代码打包合并到压缩后的JS bundle中，自然不会在HTML源码里看到单独的Vue引入标签，这是正常情况。

可以从以下HTML/源码线索判断站点用了Vue：

• DOM元素特征：查找页面元素上的Vue特有属性，包括v-前缀的指令（v-if/v-for等）、指令缩写（:代表v-bind、@代表v-on），还有Vue项目常用的根挂载节点id="app"，以及Scoped CSS生成的data-v-开头的哈希属性
• JS代码特征：在压缩后的JS文件中搜索Vue特有标识，比如DOM元素挂载的私有属性__vue__、Vue3入口方法createApp、Vue2特有的Vue.prototype字符串，还有内置组件Transition/KeepAlive相关的代码片段
• 全局变量特征：部分未做变量隔离的项目可在控制台直接访问Vue全局对象，但工程化打包的项目大多不会暴露该变量，仅作参考

其他主流框架的验证线索 #

同样的思路可以用来验证React、Angular等其他框架：

• React：
  • DOM元素上的data-reactroot（旧版本）、data-reactid属性，以及React生态常用的data-testid测试属性
  • 压缩JS中搜索ReactDOM、createElement、useState、useEffect等特有API，还有DOM上附加的__reactProps$开头的私有属性
  • 未混淆的项目可能存在react.production.min.js这类文件名特征
• Angular：
  • DOM元素上的ng-前缀属性：AngularJS版本有ng-app/ng-controller，Angular 2+版本根元素会带ng-version属性，还有样式隔离生成的_ngcontent/_nghost开头的哈希属性
  • 压缩JS中搜索angular、ngOnInit、@angular/core等特有关键字

内容的提问来源于stack exchange，提问作者Running Man