vue项目打包部署nginx(linux)

材料：

　　1、VUE项目（本地已测）

　　2、nginx（linux版）

　　3、浏览器

过程：

1、编译VUE项目

　　在项目根目录下，执行npm run build，生成dist文件夹

　　复制dist中的static、index.html到服务器相应位置（自定义）

　　本文为：/home/xxx/vue_demo

2、nginx下载安装过程：

　　登陆nginx.org网站，点击右侧download，下载开源稳定版本的nginx，本人下载为nginx-1.16.1

　　复制地址链接，在root下创建相应的文件夹，如：nginx

　　进入nginx下，执行命令，wget http://nginx.org/download/nginx-1.16.1.tar.gz 

　　执行命令，tar -xvf nginx-1.16.1.tar.gz ，解压文件，生成nginx-1.16.1

　　进入nginx-1.16.1下，执行命令./configure --help | more，查看安装nginx可用的参数列表，在此，本人选择--prefix参数定义，nginx的安装位置

　　执行命令./configure --prefix=/home/xxx/nginx

　　注意，此时，仍未出现/home/xxx/nginx文件夹

　　执行命令make，进行编译

　　执行命令make install，进行安装

　　转换到/home/xxx/nginx，查看有以下文件夹存在：

　　client_body_temp  conf  fastcgi_temp  html  logs  proxy_temp  sbin  scgi_temp  uwsgi_temp

　　至此，nginx安装完毕。（此种方式，为编译安装，支持按需扩展）

　　

3、配置VUE项目，进行访问

 

　　打开nginx下的conf，复制nginx.conf

　　命令cp nginx.conf nginx_vue.conf

　　命令vim nginx_vue.conf

　　修改server模块下部分参数：

　　　　#监听端口，浏览器访问使用　　

　　　　listen 8080;

　　　　#服务器地址（域名、IP）
　　　　server_name localhost;

　　　　#charset koi8-r;

　　　　#进程运行日志的存储地址

　　　　#access_log logs/host.access.log main;

　　　　#资源访问配置（location后的表达式，支持正则）

　　　　location / {

　　　　　　# 项目所在位置
　　　　　　root /home/xxx/vue_demo;

　　　　　　#前端起始页位置，支持多个（如下）
　　　　　　index index.html index.htm;
　　　　}

　　保存退出

 

4、nginx的相关命令

　　nginx文件夹下：

　　　　启动：./sbin/nginx

　　　　根据配置文件启动：./sbin/nginx -c nginx_vue.conf(默认为nginx.conf)

　　　　停止：./sbin/nginx -s stop

　　　　退出：./sbin/nginx -s quit（优雅的停止）

　　　　重启：./sbin/nginx -s reopen

　　　　重新加载配置文件：./sbin/nginx -s reload

　　　　查看帮助：./sbin/nginx -s -h

 

开启服务器8080端口，支持外网访问。浏览器访问ip:port，至此结束！