将vue项目部署到nginx

本文详细介绍了如何将Vue.js项目打包并使用Nginx进行部署。首先,通过npm run build命令生成dist文件夹。接着,下载并配置Nginx,将dist内容复制到nginx的html目录下。在nginx.conf中,设置try_files指令解决刷新404问题。最后,启动Nginx服务,实现项目的成功部署。
摘要由CSDN通过智能技术生成

1.将vue项目进行打包

npm run build,生成dist文件夹

2.下载nginx,可取nginx官网进行下载

nginx news

3.将dist文件夹拷贝到nginx文件下的html文件夹里面

4.修改nginx.config

 location / {
            root html/dist;
            #root   html;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

try_files 是用来解决vue项目在nginx部署,刷新404的问题(因为文件路径并非真实存在的,需要重定向到页面里)

5.执行start nginx命令启动,即可。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值