记一次痛苦的项目部署经历（VITE&VUE&NPM&NODE部署踩坑指北）

记一次痛苦的项目部署经历（VITE&VUE&NPM&NODE部署踩坑指北）

最近自己的轻薄本16G的内存做项目时完全不够用了，所以又配了一台64G的主机来写项目。

既然是用了双主机，当然要涉及到项目间的同步问题，之前还没有做过多设备的协同开发，所以在摸索的过程中今天踩了非常多非常多非常多的坑。

创建项目时git仓库的选择

这里是想同步之前开发的问卷管理系统的代码；

这是之前预期的项目结构

结果成了这样

我记得之前创建的时候，是直接用的Idea做的commit，当时是直接在外层的Project里面点的提交，然后又因为前端和后端，还有最外层的文件夹都是各算一个项目，这里的版本控制可以说是一团乱麻，这就导致我直接将我认为的项目的git本地仓库push到github时发现哥们我后端文件呢？？？

非常酸爽，我做了各种尝试

• 试图将后端仓库的.git文件夹删掉； -> 无果，push之后虽然显示文件夹，但是点一下就404
• 试图删除全部的.git，然后重新创建本地git再push，前端跑不起来寄了
• 试图将整个项目先做一个git仓库，然后后端部分引用另一个git仓库（其实这也算一种解耦合?（笑。最后没找到这个引用方法，同时我作为全干开发的话，这样我都不知道怎么版本管理了。。。

最后做了下面的决定

先解决前端报错的问题

删除本地git仓库后，执行npm run dev 就会报如下的错误

[ERROR] Could not resolve "vue-demi"

pgsql
../node_modules/vue-echarts/dist/index.esm.min.js:1:216:
  1 │ ... as s,getCurrentInstance as c,onMounted as l,onBeforeUnmount as f,h as p,nextTick as v}from"vue-demi";import{throttle as d,init as h}from"echarts/core";import{addListener as g,removeListener ...
    ╵                                                                                               ~~~~~~~~~~
You can mark the path "vue-demi" as external to exclude it from the bundle, which will remove this
error.

X [ERROR] Could not resolve "resize-detector"

javascript
../node_modules/vue-echarts/dist/index.esm.min.js:1:325:
  1 │ ...ttle as d,init as h}from"echarts/core";import{addListener as g,removeListener as m}from"resize-detector";var O=function(){return O=Object.assign||function(e){for(var t,n=1,r=arguments.length;... 
    ╵                                                                                           ~~~~~~~~~~~~~~~~~
You can mark the path "resize-detector" as external to exclude it from the bundle, which will
remove this error.

按照道理来说，git应该只负责版本控制，把它的文件删了并不会影响程序的运行，但是他就是寄了，同一台电脑上，环境完全一致。

试了很多方法，疯狂的调npm，vite和vue的配置，然后把依赖包删了下下了删重复了很多次无果。

最后决定把在笔记本上能跑的代码先复制到主机上看能不能跑，结果不出所料，寄了

还是到处查解决办法，但好像这个问题独一家，就是没办法解决

最后折腾了五六个小时，突然想想是不是大的框架版本有问题

最后和能跑起来的程序分别比对了npm、vite、node的版本，果然不一样

有预感是找到大问题了，所以就照着网上的教学把他们的版本都改成和以前一样的版本

然后跑一下前端，发现已经进入了，点开不会跟之前一样直接error退出，而是给出提示框，显而易见是有一些依赖没有自动导入进来

就是把pinia，axios，element-plus手动安一下，前端程序就正常跑起来啦

后端部分

前端的部分暂时结局了，现在需要解决git仓库的问题了

直接删除项目中所有git文件，然后开启idea打开项目文件夹，发现前端和后端都没有被自动识别为模块，我手动将其添加到Project Settings的Modules中，但是前端能正常跑，而后端就各种报错，maven直接不识别后端的文件，导致所有依赖都没有被正常引入

原因经过漫长的尝试发现是因为之前直接引入了后端的文件夹

这时就会找不到启动类；Run/Debug Configuration中找不到SpringBoot项目等问题

正确的做法是选中后端的pom.xml文件

经过快几个周末的折腾成功传到了github上实现了两台电脑之间的代码同步，并且两边都能跑起来；虽然这不是个很复杂的活，但是这些坑真的很难避免 T T

今天的部署流程为总结以下经验

• 在创建项目的git仓库时要仔细仔细再仔细，多确认一下仓库的结构，不要跟这次一样搞了几个月最后得删掉重新部署

• 与后端完备的SpringBoot项目不同，前端项目的部署对系统环境非常及其超级敏感，在部署的时候要注意版本

• 在写前端的时候，尽量使用确定的版本，避免安装一时爽，部署火葬场！

  比如npm install pinia@1.8.21而不是npm install pinia

• 导入项目时要导入正确的文件，比如SpingBoot要导入pom.xml文件

• 使用git同步文件时要提前规划好gitignore文件的内容，避免上传过多无用的非必要代码部分