Centos+Nginx部署Vue项目

1.项目打包生成dist文件夹

在项目根目录下打开cmd窗口，输入命令

npm run build
//生成dist文件夹

2.将dist文件夹上传到centos7

使用scp命令或者用远程连接工具将打包好的dist文件夹上传到服务器或者虚拟机的某个位置。

打开cmd命令输入：
scp -r 22 E:\\dist root@192.168.3.5:/home/dist
输入root 用户密码，等待上传成功即可E:\dist  为dist所在目录
root 为虚拟机root用户
192.168.3.5 为虚拟机ip
/home/ 为将dist文件上传虚拟机上home目录

3.安装nginx

推荐链接：
https://www.cnblogs.com/kaid/p/7640723.html

4.nginx的几个常用命令

//进入  /sbin目录下
cd /usr/local/nginx/sbin
//启动nginx
./nginx
//检查更改的配置
./nginx -t
//重新加载
./nginx -s reload
//停止nginx
./nginx -s stop

5.修改nginx的conf配置

//进入conf
cd /usr/local/nginx/conf
vim nginx.conf

nginx.conf这个是全部的配置文件，可以复制下来参考。

#user  nobody;
worker_processes  1;#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;#pid        logs/nginx.pid;events {worker_connections  1024;
}http {include       mime.types;default_type  application/octet-stream;#log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '#                  '$status $body_bytes_sent "$http_referer" '#                  '"$http_user_agent" "$http_x_forwarded_for"';#access_log  logs/access.log  main;sendfile        on;#tcp_nopush     on;#keepalive_timeout  0;keepalive_timeout  65;#gzip  on;#upstream表示负载服务器池，定义名字为goserver的服务器池#upstream goserver {# server 47.123.15.125:8887 weight=7;# server 192.111.50.133:8888 weight=3;#}#基于域名的虚拟主机server {#8880为监听端口号listen       8880;server_name  192.168.111.128;index  index.html index.htm;#root 是你的访问目录root   /home/dist;#charset koi8-r;#access_log  logs/host.access.log  main;      location /prod-api/ {#路径重写，这个不太懂，卡了好几天。rewrite  ^.+api/?(.*)$ /$1 break;proxy_pass http://47.123.15.125:8887;}#error_page  404              /404.html;# redirect server error pages to the static page /50x.htmlerror_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000##location ~ \.php$ {#    root           html;#    fastcgi_pass   127.0.0.1:9000;#    fastcgi_index  index.php;#    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;#    include        fastcgi_params;#}# deny access to .htaccess files, if Apache's document root# concurs with nginx's one##location ~ /\.ht {#    deny  all;#}}
}

6.将端口的防火墙关掉

//8088，自己指定端口
firewall-cmd --permanent --add-port=8880/tcp --zone=public
//重新加载
firewall-cmd --reload

7.重新加载配置,启动nginx

//检查配置是否正确
./nginx -t
//启动nginx
./nginx

8.浏览器访问本机虚拟机ip

http://192.168.111.128:8880

9.路径重写rewrite

可以看下这个，写的比较详细
https://blog.csdn.net/hotlinhao/article/details/88355125
http://www.pianshen.com/article/9593257962/

Centos+Nginx部署Vue项目相关推荐

VUE项目学习（三）：win10版nginx部署vue项目
VUE项目学习(三):win10版nginx部署vue项目 niginx的安装和启停操作参照博客:https://blog.csdn.net/qq_26666947/article/details/1 ...
nginx部署vue项目，给访问路径加前缀
Nginx安装与启动去官网下载nginx压缩包,解压到电脑合适位置,我这放在D盘,目录是D:\nginx-1.21.6, 在这个路径,直接输入cmd,打开命令行,启动命令: nginx.exe 或者 ...
Nginx部署Vue项目动态路由刷新404
目录前言第一次第二次前言记录下Nginx部署Vue项目刷新404的解决方案,遇到了两次,route用的是history路由模式,动态路由: {path: '/article/:blogId' ...
服务器使用Nginx部署Vue项目
服务器使用Nginx部署Vue项目首先得购买个服务器,在这就不教怎么购买了,本文章使用的是阿里云轻量级服务器CentOS7.6 一.安装Nginx 1. 使用XShell连接我们的服务器 2. 配置 ...
Ubuntu 下搭建 Nginx 部署 vue 项目
Ubuntu 下搭建 Nginx 部署 vue 项目上一篇:Ubuntu 下部署 SpringBoot 第一步: Ubuntu 上安装 nodejs 执行 apt install nodejs 命令 ...
nginx部署vue项目加载资源慢优化方案
目录 1.问题 2.解决方案推荐gzip压缩解压 2.1 vue项目的配置文件中加如下配置 2.3 nginx服务器配置 1.问题当我采用nginx部署了vue的项目后发现第一次访问网站需要1分左右 ...
nginx部署vue项目，内外网映射后访问不到
问题:在内网服务器中用nginx部署了vue项目,再将外网域名与内网IP做了映射. 访问内网IP:PORT 成功进入访问域名:PORT 无法进入例:内网ng地址:123.12.1.2:9000 通 ...
Docker + Nginx 部署Vue项目
1.vue项目打包打包生成dist文件夹 npm run build 如果将该dist目录整个传到服务器上,部署成静态资源站点就能直接访问到该项目. assetsPublicPath: '/' 记得 ...
使用Docker Nginx部署vue项目
Vue3 项目打包打包 Vue 项目在根目录使用以下命令: npm run build 执行以上命令,输出结果如下: 执行完成后,会在 Vue 项目下会生成一个 dist 目录,该目录一般包含 in ...

Centos+Nginx部署Vue项目

Centos+Nginx部署Vue项目

1.项目打包生成dist文件夹

2.将dist文件夹上传到centos7

3.安装nginx

4.nginx的几个常用命令

5.修改nginx的conf配置

6.将端口的防火墙关掉

7.重新加载配置,启动nginx

8.浏览器访问本机虚拟机ip

9.路径重写rewrite

Centos+Nginx部署Vue项目相关推荐

最新文章

热门文章