vue项目部署在windows下的nginx服务器上

vue项目打包

首先需要修改vue项目目录下的文件util.js


其次修改index.js中的配置


项目编码完成后，在项目根目录下按住shirt键加鼠标右键，选中在此处打开命令窗口，输入如下代码，项目打包完成后会在根目录下生成dist文件夹。

npm run build

Windows下安装nginx服务器

1. 到nginx官网下载，链接：http://nginx.org/en/download.html
   

2. 下载完成后解压到任意位置，如放到D盘目录下

3. 打开命令窗口运行nginx服务器
   

4. 在浏览器中输入127.0.0.1回车即可看到如下启动页
   

5. 如果启动失败，一般是默认的80端口被占用了，打开命令窗口输入如下代码，查询80端口占用情况

netstat -aon|findstr “80”

1. 找到占用80端口的PID
2. 打开任务管理器找到对应PID结束进程即可，如果任务管理没有PID，点击任务管理器菜单栏的查看->选择列，在打开的窗口中选中PID即可
   
3. 随后重新第三步操作即可

将VUE项目部署到nginx服务器中

1. 修改nginx目录下conf文件下的nginx.conf文件
   
2. 将nginx目录下的html中文件删除，并将vue打包后生成的dist文件夹中的文件拷贝到html文件夹下
   
3. 重启nginx服务器，在浏览器输入对应的地址和端口后就能看到部署上去的项目了，默认是：127.0.0.1:80

nginx.exe -s reload