vue+Nginx远程配置

历经了小半天,终于将vue项目部署成功,哈哈哈。

下面就记录这次的部署(阿里云),希望后面的小伙伴踩坑能及时跳出来!!!

问题:访问首页成功,但二级页面404。

 1、vue打包

对于前端小萌新一枚,打包这个词听着好高大尚啊,是什么玩意?

前端项目打包:其实是用cli脚手架创建的项目很大啦,然后正式环境又不需要安装生产依赖环境,所以可以用webpack将项目进行精简,让项目瘦下来,好在运行的时候跑的快嘛~

 2、Nginx根目录部署

  •  一般来说,安装了Niginx会有这样一个目录结构,如果想直接在根目录上部署,直接将打包好的dist文件的内容剪切进去,就差不多完事了。
  • 首页是能直接访问了,不过你的其他子页面就404出错了,是不是很揪心???
  • 解决:在nginx.conf添加配置(try_files $uri $uri/ /index.html;)//匹配从路由跳转的页面文件
  • 项目的话,只需要在根目录添加vue.config.js,配置publicPath(打包成功后的文件引入会以./开头
module.exports = {
    publicPath: '
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值