一看就会的部署前端vue项目教程(超详细)

前提条件：有服务器，安装了nginx，没有安装到nginx的可以找我以前的教程在服务器安装一下。

1.打开需要部署的前端项目，一定要进到主目录

2.主目录下输入

npm i

2.编译通过后，需要查看下当前vue项目打包的配置是哪个

        2.1主目录下找到package.json文件，打开可以看到scripts的代码块里面的build对应的serve是否符合生产配置

        2.2确认配置无误则可以输入

npm run build

3.执行完命令就会发现主目录多了一个dist文件夹

4.右键选择资源管理器中显示

5.压缩文件夹，得到dist.zip

6.用管理工具打开服务器(工具有很多，比如FinalShell，MobaXterm等等，我用的是MobaXterm)，找到对应存放前端代码的文件夹，上传dist.zip文件到这里

7.上传完成后，在当前服务器的文件夹这里输入

unzip dist.zip

        7.1解压完成即可(部署完成)，可以用ip或者域名来访问前段页面了

                7.1.1之前没有部署过的不会触发第二个步骤，我这里是有解压过目录，就输入A新替换所有

注：要访问网页需要正确配置好nginx的代理路径(有需要配置nginx文件的可以找我教程看看)，另外有调用到后端接口的还需要有后端的服务启动。