本地npm运行vue项目踩坑记录

今天 leader 给了我一个前端的Vue项目让我学习，我高兴极了，踩了一天的坑……

在跌跌撞撞的配置好SVN小乌龟后，我终于拿到了项目并立马导出到了我心爱的Vscode

并打开终端开始了快乐的踩坑时光……

1. npm报错：missing script: serve / dev

在经过迷茫和反复搜索后，我找到了一个简洁的答案：vue启动项目报错：npm ERR! missing script: serve解决方法_vue npm err! missing script: server-CSDN博客

（1）问题原因：

在配置文件中的服务器名称和你启动命令中的名称不匹配。

（2）解决方法：

查看配置文件package.json 中服务器名称，并修改启动命令。

如图，发现在 “webpack-dev-server” 处使用的服务器名称是 start，所以更改启动命令

npm run start

成功解决

2. npm报错：Error: listen EADDRINUSE: address already in use……

唉…我就知道没有这么容易解决，网上冲浪后分析如下。

（1）问题原因：

9000（也有可能是别的）端口已占用，需要查看端口占用获取对应的PID进程后杀死该进程

（2）解决方案

① 查看端口使用情况

netstat -ano

找到自己的端口，并找到其对应的PID值

② get！关闭该进程然后解除占用

taskkill -f /pid 7592

成功解决

3. npm报错：ERROR in …… Module not found :Error: Can't resolve……

（1）问题原因：

未找到的模块/包

（2）解决方案

① 重新安装没有的软件包

在报错的红色区会有许多文件的路径，这时就需要你耐心打开报错的提示文件，重新安装项目目录中没有的软件包

例如，在我的报错文件中，我发现这个 vant 软件包是我没有的，

npm install vant

重新下载即可解决

② 查看缺失的文件是什么

如果缺失的是文件，需要将那行代码注释掉，或者找发你项目的人询问索取一下~

4.npm报错：ERR! code ELIFECYCLE

参见Blog：解析npm ERR! code ELIFECYCLE错误及解决方法-CSDN博客

前辈已经说得很详细了！

我直接输入

npm install

重新安装依赖后便神奇地解决了，然后出现了新的报错……

5. npm报错：ERROR in … from UglifyJs Unexpected token: operator (>)

（1）问题分析

①Uglifyjs压缩js的的时候，要求不能有es6语法

②也有可能是因为安装的第三方插件使用es6语法，压缩插件不支持导致

参照：UglifyJs SyntaxError: Unexpected token: operator (>) - 简书 (jianshu.com)

（2）解决方案

vue-cli默认是检测src和test目录下的js文件。将dom7的文件加入无include中就可以了

test: /.js$/,loader: 'babel-loader',options: { presets: ['env', 'stage-2']},include: [resolve('src'), resolve('test'),resolve('node_modules/dom7')]

还有这个方案也挺好：ERROR in build.js from UglifyJs Unexpected token operator «=», expected punc «,»-CSDN博客

但是我还是没有解决，伤心。

总结

今天在运行项目时把npm该踩的坑都踩了一遍（擦泪），真悲伤。

不过在运行的过程中除了收获了坏心情，也学会了关于npm的很多实用的知识和技巧，感觉自己的智慧增加了，脾气也变好了！

希望明天会更好呜呜呜qwq