您的位置:首页 > Web前端 > Vue.js

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

Sy_callpolice 2019-06-11 07:23 134 查看 https://blog.csdn.net/sy_callp

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

标签: