vue项目nginx部署 - 邱乘屹的个人技术博客

修改配置

在config的index.js里,将此处的’/‘改为’./’
在这里插入图片描述
因为在项目路径下index.html在根目录下,现在要求和static同级;这一步是为了匹配css和js的绝对路径,为了解决页面不显示问题

项目打包

使用命令

npm run build

进行打包

将项目上传到服务器

打包成功后,会生成一个dist文件夹,将文件夹上传到服务器
在这里插入图片描述

nginx安装配置

cd /usr/local

下载nginx安装包,也可以使用xshell,iterm之类上传到服务器

wget http://nginx.org/download/nginx-1.6.2.tar.gz
解压并安装

tar -zxvf nginx-1.6.2.tar.gz -C /usr/local (local这个目录类似于Windows的program目录,所以一些软件可以都安装在这里)

所需的依赖
  1. yum install pcre

  2. yum install pcre-devel

  3. yum install zlib

  4. yum install zlib-devel

configure配置

cd /usr/local/nginx-1.6.2 && ./configure --prefix=/usr/local/nginx

编译安装( cd 到解压好的nginx-1.6.2,这个目录下安装编译)

make && make install

启动Nginx

执行完后,cd 到/usr/local/nginx目录下。执行ls,可以看到四个目录

conf----配置文件 html----网页文件 logs-----日志文件 sbin------主要二进制程序

启动命令: /usr/local/ngnix/sbin/nginx (无参数) 启动 (-s stop)关闭 (-s reload)重启

查看

查看是否成功 ps -ef | grep nginx (如果能看到两个相邻ID的进程,说明启动成功)

失败的可能 80端口被占用了。 netstat -ano | grep 80
如果成功的话,浏览器访问能看到欢迎页面:(http://服务器的IP:80)
在这里插入图片描述

Nginx配置

vim conf/nginx.conf
在这里插入图片描述
访问成功!
至此,配置完成了!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值