Windows 使用 Nginx 部署 vue 项目

1.安装Nginx 并将项目打包

    安装教程  Windows 安装 Nginx

    打包步骤 

        通过命令行工具,或者编译器都可以

        进入项目路径中,使用命令打包

npm run build

        打包后会在项目文件夹中出现一个名为 dist 的文件夹,表示打包成功

2.将打包好的vue项目,也就是 dist 文件夹内的内容 粘贴到 nginx 文件夹下的 html 文件夹内

3.修改 nginx conf 文件夹 中的 nginx.conf

 将 root 修改为 html 的路径

4.启动访问即可完成

   启动 nginx 命令,需要进到 nginx 的目录中

start nginx

  或者双击 nginx.exe

  查询 nginx 服务器是否启动成功

tasklist /fi "imagename eq nginx.exe"

  关闭所有 nginx 服务器

taskkill /f /t /im nginx.exe

5.解决路由中使用 history 导致 404 的问题,将以下代码放到 location 中 index 下面即可,如若使用的是 hash 那么请忽略本步骤

#解决404
try_files $uri $uri/ /index.html;

  • 2
    点赞
  • 39
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

梦逝忘尘

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值