vue项目部署到服务器

启动和打包

1. 进入项目目录

cd 进入到你项目的根目录

1. 安装依赖

npm install

1. 强烈建议不要用直接使用 cnpm 安装，会有各种诡异的 bug，可以通过重新指定 registry 来解决 npm 安装速度慢的问题。

npm install --registry=https://registry.npmmirror.com

1. 本地开发 启动项目

npm run dev

1. 打包正式环境

npm run build:prod

1. 打包预发布环境

npm run build:stage

1. 执行玩打包命令后会默认在项目的根目录生成dist 文件夹

通常情况下 dist 文件夹的静态文件发布到你的 nginx 或者静态服务器即可，其中的 index.html 是后台服务的入口页面。

Ngingx 服务器安装

1. 默认情况Centos7中无Nginx的源，最近发现Nginx官网提供了Centos的源地址。因此可以如下执行命令添加源

sudo rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm

1. 安装Nginx
   使用命令，看看是否已经添加源成功

  yum search nginx

1. 如果成功则执行下列命令安装Nginx。

sudo yum install -y nginx

1. 设置开机自启

  systemctl enable nginx

1. 只有返回类似，提示才能够确定设置成功

 Created symlink from /etc/systemd/system/multi-user.target.wants/nginx.service to /etc/systemd/system/nginx.service

nginx配置文件默认是在 /etc/nginx/nginx.conf

1. 将打好的dist包放到服务器指定的路径
   我这里是放在 /home/ruoyi/dist ，root 配置必须指向 dist包的根目录

location 配置

location / {
    root   /home/ruoyi/dist;
    try_files $uri $uri/ /index.html;
    index  index.html index.htm;
}

nginx 完整配置

 types_hash_max_size 4096;
    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    include /etc/nginx/conf.d/*.conf;
    server {
        listen       80;
        server_name  localhost;


        error_page 404 /404.html;
        location = /404.html {
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        }
		
		# 指向你的vue静态资源，我打包后的文件放在了/home/ruoyi/dist
        location / {
            root   /home/ruoyi/dist;
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
        # 
        location /prod-api/ {
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://localhost:8080/;
        }
    }

如果一切配置完毕 通过你的 (ip:80) 就能访问了 如 159.75.229.3:80