linux系统 运行xue项目且访问后台(基于nignx)

1.xue项目创建

我的音乐项目git地址music里面有vue，和后台

首先 有一个vue项目(具体怎么创建vue请自行百度)
linux 系统是centos7
对自己的vue项目进行build 在

npm run build

或者

出现Build complete.就是完成编辑了

然后你会看到出现了一个dist的文件夹 这就是xue的打包


把这个dist发送到linux文件下
可以用xftp 进行传输

2.nginx 安装

以下都是在linux系统运行
http://nginx.org/download/
进入地址找到最新的

1.创建nginx安装地址

[root@cqakserver local]# mkdir /usr/local/nginx
[root@cqakserver local]# cd /usr/local/nginx

2.执行下载nginx

[root@cqakserver local]# wget http://nginx.org/download/nginx-1.13.6.tar.gz

3.解压nginx安装包

[root@cqakserver nginx]# tar -zvxf nginx-1.13.6.tar.gz
[root@cqakserver nginx]# cd nginx-1.13.6

4.更新一下yum

[root@cqakserver nginx]# yum update

5.安装前置库：

[root@cqakserver nginx]# yum install -y gcc pcre pcre-devel openssl openssl-devel gd gd-devel

6.编译nginx

[root@cqakserver nginx]#  ./configure --prefix=/usr/local/nginx --pid-path=/usr/local/nginx/run --user=nginx --group=nginx --with-http_ssl_module --with-http_flv_module --with-http_stub_status_module --with-http_gzip_static_module --with-pcre --with-http_image_filter_module --with-debug
[root@cqakserver nginx]# make && make install 

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

[root@cqakserver nginx]# cp nginx.conf nginx_vue.conf

8.修改nginx_vue.conf

[root@cqakserver nginx]# vim nginx_vue.conf

修改server模块下部分参数：

#监听端口，浏览器访问使用　　
　　　　listen 8080;
　　　　#服务器地址（域名、IP）
　　　　server_name localhost;
　　　　#charset koi8-r;
　　　　#进程运行日志的存储地址
　　　　#access_log logs/host.access.log main;
　　　　#资源访问配置（location后的表达式，支持正则）
　　　　location / {
　　　　　　# 项目所在位置
　　　　　　root /usr/local/javavue/dist;
　　　　　　#前端起始页位置，支持多个（如下）
　　　　　　index index.html index.htm;
　　　　}

9.配置nginx访问后台

　#监听端口，浏览器访问使用　　
　　　　listen 8080;
　　　　#服务器地址（域名、IP）
　　　　server_name localhost;
　　　　#charset koi8-r;
　　　　#进程运行日志的存储地址
　　　　#access_log logs/host.access.log main;
　　　　#资源访问配置（location后的表达式，支持正则）
　　　　location / {
　　　　　　# 项目所在位置
　　　　　　root /usr/local/javavue/dist;
　　　　　　#前端起始页位置，支持多个（如下）
　　　　　　index index.html index.htm;
　　　　}
    #配置前端访问后端地址
      location /api/ {
            proxy_pass http://127.0.0.1:8888;
        }

10.前端vue配置

在访问后台的地方做一个全部访问的前缀

跨域处理

11.nginx的相关命令如下

nginx文件夹下：
　　　　启动：./sbin/nginx
　　　　根据配置文件启动：./nginx -c /usr/local/nginx/conf/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

到这里就启动nginx就行

[root@cqakserver nginx]#  ./nginx -c /usr/local/nginx/conf/nginx_vue.conf(默认为nginx.conf)

访问浏览器