Centos+Nginx部署Vue项目
1.项目打包生成dist文件夹
在项目根目录下打开cmd窗口,输入命令
npm run build
//生成dist文件夹
2.将dist文件夹上传到centos7
使用scp命令或者用远程连接工具将打包好的dist文件夹上传到服务器或者虚拟机的某个位置。
打开cmd命令输入:
scp -r 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 ;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections ;
}
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 ;
keepalive_timeout ;
#gzip on;
server {
listen ;
server_name 192.168.111.128;
index index.html index.htm;
root /app/fusionwork_deployment/web;
#charset koi8-r;
#access_log logs/host.access.log main;
#location / {
# root html;
# index index.html index.htm;
#}
#error_page /.html;
# redirect server error pages to the static page /50x.html
#
error_page /50x.html;
location = /50x.html {
root html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:;
# 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;
#}
}
# another virtual host using mix of IP-, name-, and port-based configuration
#
#server {
# listen ;
# listen somename:;
# server_name somename alias another.alias;
# location / {
# root html;
# index index.html index.htm;
# }
#}
# HTTPS server
#
#server {
# listen ssl;
# server_name localhost;
# ssl_certificate cert.pem;
# ssl_certificate_key cert.key;
# ssl_session_cache shared:SSL:1m;
# ssl_session_timeout 5m;
# ssl_ciphers HIGH:!aNULL:!MD5;
# ssl_prefer_server_ciphers on;
# location / {
# root html;
# index index.html index.htm;
# }
#}
}
6.将端口的防火墙关掉
//8088,自己指定端口
firewall-cmd --permanent --add-port=/tcp --zone=public
//重新加载
firewall-cmd --reload
7.重新加载配置,启动nginx
//检查配置是否正确
./nginx -t
//启动nginx
./nginx
8.浏览器访问本机虚拟机ip
http://192.168.111.128
9.路径重写rewrite
可以看下这个,写的比较详细
https://blog.csdn.net/hotlinhao/article/details/88355125
http://www.pianshen.com/article/9593257962/
Centos+Nginx部署Vue项目的更多相关文章
- nginx部署vue项目
nginx是一个高性能的HTTP和反向代理服务器.因此常用来做静态资源服务器和后端的反向代理服务器.本文主要记录使用nginx去部署使用vue搭建的前端项目,项目基于vue官方的脚手架vue-cli构 ...
- CentOS7 安装nginx部署vue项目
简单描述:代码开发完了,需要环境来运行测试.服务器上没有nginx,搞起搞起. 在Centos下,yum源不提供nginx的安装,可以通过切换yum源的方法获取安装.也可以通过直接下载安装包的方法 ...
- Centos7 使用nginx部署vue项目
一.安装nginx #设置源 sudo rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0 ...
- Docker镜像+nginx 部署 vue 项目
一.打包vue项目 在开发完的vue项目输入如下命名,打包生成dist文件夹 yarn build / npm run build 此时根目录会多出一个文件夹:dist文件夹,里面就是我们要发布的东西 ...
- nginx部署vue项目 解决方案
给前端同事部署了web项目之后,访问发现除了index.html可以访问,其他的路径使用了“伪静态”.比如访问:http://localhost:8081/user/login,访问即报404错误,这 ...
- 关于nginx部署vue项目的两个问题
首先我使用的是后端接口+前端vue的形式,这样就涉及到跨域的问题.我是这样配置的: server { listen 80; server_name www.liangyp.xyz;//访问网址 loc ...
- Nginx部署vue项目的配置
. 官网下载 http://nginx.org/en/download.html 选择stable version nginx/Windows-1.14.1 pgp . 解压 然后配置环境变量,如果环 ...
- 在nginx上部署vue项目(history模式);
在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...
- 在nginx上部署vue项目(history模式)--demo实列;
在很早之前,我写了一篇 关于 在nginx上部署vue项目(history模式) 但是讲的都是理论,所以今天做个demo来实战下.有必要让大家更好的理解,我发现搜索这类似的问题还是挺多的,因此在写一篇 ...
随机推荐
- P2058 海港 (洛谷)
这个题复制过来真的有点恶心,懒得手打,以后再搬题面吧. 今天我双更了,AC这个题我就完成某谷春令营第一课的作业了(假的) 这个题是个双指针.非常友善.一直往里读入就可以了,遇见不是一条船的乘客输出这一 ...
- 树形dp 之 小胖守皇宫
题目描述 huyichen世子事件后,xuzhenyi成了皇上特聘的御前一品侍卫. 皇宫以午门为起点,直到后宫嫔妃们的寝宫,呈一棵树的形状:有边相连的宫殿间可以互相望见.大内保卫森严,三步一岗,五步一 ...
- java基础知识--数据类型
计算机时识别不了我们编写的代码语言,计算机中的数据全部采用二进制表示,即0和1表示的数字,每一个0或者1就是一个位,一个位叫做一个bit(比特).(实际上计算机只能识别高低电平,而不是0和1.) 字节 ...
- Python新手学习raise用法
当程序出现错误时,系统会自动引发异常.除此之外,Python也允许程序自行引发异常,自行引发异常使用 raise 语句来完成. 很多时候,系统是否要引发异常,可能需要根据应用的业务需求来决定,如果程序 ...
- python-多任务编程01-线程(threading)
并发:指的是任务数多余cpu核数,通过操作系统的各种任务调度算法,实现用多个任务“一起”执行(实际上总有一些任务不在执行,因为切换任务的速度相当快,看上去一起执行而已) 并行:指的是任务数小于等于cp ...
- Python 正则表达式简单了解
match 从字符串的开始匹配 如果开头不符合要求 就会报错 search 用字符串里的每一个元素 去匹配找的元素 1.匹配单个字符 \d 数字 \D 非数字 . 匹配任意字符 除了\n [] ...
- Mybatis(四)多表操作
数据库如下: 一.创建数据库所对应的bean类 public class User { private Integer uId; private String username; private St ...
- 《闲扯Redis七》Redis字典结构的底层实现
一.前言 上节<闲扯Redis六>Redis五种数据类型之Hash型 中说到 Hash(哈希对象)的底层实现有: 1.ziplist 编码的哈希对象使用压缩列表作为底层实现 2.hasht ...
- 微型计算机系统实验总结(学习性实验:IO地址译码,可编程并行接口8255,交通灯控制实验 + 自主设计实验:汽车信号灯控制系统,电风扇控制器,洗衣机控制系统,霓虹灯,电梯控制系统)
实验配套软件: https://download.csdn.net/download/qq_39932172/11221584 实验指导用书: 教师版: https://download.csdn.n ...
- MongoDB基本使用方法
mongo与关系型数据库的概念对比,区分大小写,_id为主键. 一.数据库操作 >show dbs或者show databases #查看所有数据库 >use dbname #创 ...