本地运行静态html项目——记一次加密环境下排错的过程

项目场景：

项目中需要跑起来一个静态网页demo

问题描述

首先尝试直接用chrome打开页面是空白，f12打开控制台显示这样的错误
Failed to load resource: net::ERR_FILE_NOT_FOUND
index.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
avue.js:1 Uncaught SyntaxError: Invalid or unexpected token
Vue warn]: Unknown custom element: <> - did you register the component correctly? For recursive components, make sure to provide the “name” option

原因分析：

大致浏览了一下没看出什么原因，然后想到可能是公司的js加密导致浏览器打开异常，于是将项目复制到虚拟机中使用chrome打开。虚拟机中打开同样是空白，f12查看控制台，发现这样的错误

看了下页面代码看到有…/…/这样的相对路径，这个是别人打包好的项目，感觉不应该是路径问题，就没仔细看。然后又切换到本机，向解密js的方向前进，经过百度，npm全局安装上live-server这个插件，又用vscode打开项目目录通过浏览器打开live-server地址，可以看到项目，然后报错信息没有变化，这个时候就怀疑是路径问题，仔细查看页面代码发现有两个引用文件多了一个…/导致引用路径找不到文件

解决方案：

原因找到了，解决方法就是挨个把错误的html引用改过来。

经验总结：

这次的问题很简单，排查的时候却多走了冤枉路。别人提供的已经打包的文件也应该保持怀疑精神，仔细根据错误信息提示排查。因为这次的排查，了解了这个live-server的插件可能对以后在js加密环境下开发有作用。