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项目的更多相关文章

  1. nginx部署vue项目

    nginx是一个高性能的HTTP和反向代理服务器.因此常用来做静态资源服务器和后端的反向代理服务器.本文主要记录使用nginx去部署使用vue搭建的前端项目,项目基于vue官方的脚手架vue-cli构 ...

  2. CentOS7 安装nginx部署vue项目

    简单描述:代码开发完了,需要环境来运行测试.服务器上没有nginx,搞起搞起.   在Centos下,yum源不提供nginx的安装,可以通过切换yum源的方法获取安装.也可以通过直接下载安装包的方法 ...

  3. Centos7 使用nginx部署vue项目

    一.安装nginx #设置源 sudo rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0 ...

  4. Docker镜像+nginx 部署 vue 项目

    一.打包vue项目 在开发完的vue项目输入如下命名,打包生成dist文件夹 yarn build / npm run build 此时根目录会多出一个文件夹:dist文件夹,里面就是我们要发布的东西 ...

  5. nginx部署vue项目 解决方案

    给前端同事部署了web项目之后,访问发现除了index.html可以访问,其他的路径使用了“伪静态”.比如访问:http://localhost:8081/user/login,访问即报404错误,这 ...

  6. 关于nginx部署vue项目的两个问题

    首先我使用的是后端接口+前端vue的形式,这样就涉及到跨域的问题.我是这样配置的: server { listen 80; server_name www.liangyp.xyz;//访问网址 loc ...

  7. Nginx部署vue项目的配置

    . 官网下载 http://nginx.org/en/download.html 选择stable version nginx/Windows-1.14.1 pgp . 解压 然后配置环境变量,如果环 ...

  8. 在nginx上部署vue项目(history模式);

    在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...

  9. 在nginx上部署vue项目(history模式)--demo实列;

    在很早之前,我写了一篇 关于 在nginx上部署vue项目(history模式) 但是讲的都是理论,所以今天做个demo来实战下.有必要让大家更好的理解,我发现搜索这类似的问题还是挺多的,因此在写一篇 ...

随机推荐

  1. P2060 马步距离(洛谷)

    我们无论遇到什么困难,都不要拖,微笑着面对他,战胜拖延的最好方法就是面对拖延. 今天又拖延了…… 早晨听完老师讲课,本想做一道题练练手的,结果因为懒,瘫了一上午.最后在固定的刷题时间去面对了这道题,然 ...

  2. 013.Nginx动静分离

    一 动静分离概述 1.1 动静分离介绍 为了提高网站的响应速度,减轻程序服务器(Tomcat,Jboss等)的负载,对于静态资源,如图片.js.css等文件,可以在反向代理服务器中进行缓存,这样浏览器 ...

  3. CI/CD系列之阿里云云效2020应用篇

    目录 前言 实战 制品仓库 maven配置 项目pom配置 代码管理 流水线 参考资料 前言 前不久登录阿里云后台,看到云效的介绍,出于好奇便点进去看了看,刚开始以为云效是类似Jenkins的一套自动 ...

  4. 文件传输协议---TFTP

    简介 TFTP协议全称为简单文件传输协议,是以UDP为基础的应用层协议,主要用于不同设备之间的文件传输.具有协议简单,易于实现的特点,常用于嵌入式设备开发中. 传输模式 数据的存储有不同的格式,磁盘中 ...

  5. java并发编程[持续更新]

    目录 java并发编程 1.常用类介绍 Semaphore 2.名词解释 2.1 线程安全 2.2 可重入锁和不可重入锁 java并发编程 1.常用类介绍 Semaphore Semaphore 类是 ...

  6. 洛谷p1120小木棍(剪枝优化)

    #include <iostream> #include <cstdio> #include <cstring> #include <algorithm> ...

  7. e的存在性证明和计算公式的证明

    \(\quad\quad前言\quad\quad\\\) \(此证明,改编自中科大数分教材,史济怀版\\\) \(中科大教材,用的是先固定m,再放大m,跟菲赫金哥尔茨的方法一样.\\\) \(而我这里 ...

  8. rpm -ivh vsftpd-3.0.2-22.el7.x86_64.rpm出现error: open of vsftpd-3.0.2-22.el7.x86_64.rpm failed: No such file or directory的解决方法

    情况一: 出现如图问题, 我当时的问题是通过安装rpmbuild工具软件解决的 以前制作rpm时,没有遇到过这个问题,几经搜索也没有解决.后来发现当前的centos没有安装 rpmbuild 工具软件 ...

  9. Ubuntu Linux markdown编辑工具 typora 安装

    Typora简介 Typora是一款轻便简洁的Markdown编辑器,支持即时渲染技术,这也是与其他Markdown编辑器最显著的区别.即时渲染使得你写Markdown就想是写Word文档一样流畅自如 ...

  10. Servlet学习之Tomcat控制台中文乱码问题

    Tomcat控制台中文乱码问题 在更新了IDEA2020.1版本后,可以安装官方的简体中文插件,方便我们日常使用,但是更新后再运行Tomcat时,控制台的输出日志出现中文乱码问题,接下来告诉大家如何修 ...