企业官网建设流程全解析

Vue项目部署到Nginx服务器

1.1使用编译器打开这个项目

除了编译器也可以在控制台中操作，在控制台中需要直接定位到前端的目录下，把地址栏中的地址改为cmd回车然后输入npm run build也可以进行打包

1.打开项目后，选择前端的文件夹(编译器:VSCode,WebStorm,Hbuilder X等软件)

这里以vscode为例:

项目一般都是一整个文件夹，选择打开文件夹

2.选择项目存放的位置→选择文件夹

3.然后就打开了项目的前端文件

4.Windows：Ctrl + ~（键盘左上角，Esc 下方那个波浪键）按一下直接弹出底部终端控制台。这是控制台就会直接定位到你的项目前端文件夹

5.然后输入,等待打包完成

注意:在前端打包前，先使用cd命令把目录切换到前端目录下，要不一直默认为整个项目的文件夹下

npm run build

如果允许npm run build这段命令在控制台中报错

需要使用Windows PowerShell以管理员身份运行输入,系统询问是否修改输入y(大小写都可以)回车

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

6.打包完成，打包完成后在左侧可以看到有一个dist文件夹，前端的项目打包完成后都放在dist文件夹中

1.2Nginx的安装和配置

nginx:介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。

1.下载Nginx,选择相应的版本下载nginxhttps://nginx.org/

nginx-1.31.3 pgp下载后的文件扩展名时.tar,这个是Linux系统下载的版本

nginx/Windows- 1.31.3 pgp下载后的文件扩展名时.rar,这个时Windows系统下载的版

2.下载完成后，把Nginx放到一个存英文的目录下，进行解压

3.然后将前端打包好的文件拷贝到html文件夹内

源目录的disk

第一次打开nginx中的html文件夹时会有两个html文件可以直接删除然后将源项目disk文件夹的内容拷贝到nginx中的disk

4.这样就把前端的项目放到Nginx的服务器里了

1.3 启动Nginx

1.双击nginx目录下的nginx.exe或者是使用控制台把Nginx启动

先切换到nginx的目录下，将地址栏的信息改为cmd回车

输入start nginx，屏幕上会闪一下控制台就证明启动起来了

2.在任务管理器中查看Nginx的进程是否存在

启动后默认会占用本地的80端口号，然后会弹出一个黑色的框闪一下，在任务管理器中查看Nginx的进程，如果没有出现nginx.exe的进程，就回到nginx的根目录下有一个logs的文件夹双击打开,双击error.log文件使用记事本打开查看错误信息根据错误信息修改相应的配置文件config文件夹中的内容。

问题解决：

a.先查看是哪个应用占用了80端口

win+r打开运行输入cmd回车

输入

netstat -ano | findStr 80 //出现内容 TCP 0.0.0.0:80 0.0.0.0:0 LISTENING 4 // 4代表的是PID

b.如果遇到是System，证明是系统进程，就不要更改系统进程，更改一下nginx的端口

c.在nginx目录下有一个conf文件夹，双击nginx.conf文件用记事本打开

d.把80端口改为90，保存并重新双击nginx.exe并在任务管理器中查看nginx的进程

3.访问自己部署在Nginx的前端项目

用浏览器访问一下Nginx部署的前端工程，如果是80端口，直接访问localhost回车，如果不是80端口则需要输入localhost:端口号，回车就可以访问到自己部署的前端工程