使用Nginx部署VUE项目(Centos服务器)

XiaoMiao

Nginx

Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器,同时也提供了IMAP/POP3/SMTP服务。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点(俄文:Рамблер)开发的,第一个公开版本0.1.0发布于2004年10月4日。
其将源代码以类BSD许可证的形式发布,因它的稳定性、丰富的功能集、简单的配置文件和低系统资源的消耗而闻名。2011年6月1日,nginx 1.0.4发布。
Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,在BSD-like 协议下发行。其特点是占有内存少,并发能力强,事实上nginx的并发能力在同类型的网页服务器中表现较好,中国大陆使用nginx网站用户有:百度、京东、新浪、网易、腾讯、淘宝等。

怎么将vue项目部署到nginx呢?

首先我使用的是阿里云服务器Centos系统

系统中先安装好nginx
我之前有写过centos安装nginx可以看看
https://segmentfault.com/a/11...

查看nginx是否安装命令
nginx -v
Snipaste_2021-09-29_09-20-05.png

部署vue项目前提得有域名以及域名ssl证书(这样子就可以直接拿域名去访问vue项目以及是https的)

再部署vue项目之前得建立个文件夹用来存放vue项目和方便管理

Snipaste_2021-09-29_09-24-11.png

可以像这个样子 一会我们的vue项目存放到adminvue文件夹中方便管理和查找使用

接下来就是vue项目打包
npm run build

vue项目目录下会出现dist文件夹
Snipaste_2021-09-29_09-27-42.png

接下来可以把dist里面的所有东西放到刚才创建的adminvue文件夹中,可以使用Xftp
Snipaste_2021-09-29_09-30-39.png

直接复制进去就行。

接下来就是配置nginx来访问咱们的vue项目了

Snipaste_2021-09-29_09-33-38.png

server{
  server_name 域名;
  rewrite ^(.*)$ https://${server_name}$1 permanent;
}
server {
  listen 443 ssl;
  server_name 域名;
  ssl_certificate /etc/nginx/conf.d/域名ssl证书pem文件;
  ssl_certificate_key /etc/nginx/conf.d/域名ssl证书key文件;
  add_header Access-Control-Allow-Origin *;
  add_header Access-Control-Allow-Headers X-Requested-With;
  add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
  location / { 
    root vue项目路径;
    index index.html index.htm;
  }
}

然后在使用命令启动nginx

一般默认路径
/usr/local/nginx/sbin

查看版本
./nginx -V

关闭nginx
./nginx -s stop

开启nginx
./nginx

重新加载nginx
./nginx -s reload

nginx配置文件
/usr/local/nginx/conf/nginx.conf

可以直接拿域名访问咱们的vue项目啦!!!

阅读 326

i am bug!

19 声望
0 粉丝
0 条评论
你知道吗?

i am bug!

19 声望
0 粉丝
文章目录
宣传栏