vue项目部署到服务器

启动和打包

1. 进入项目目录

cd 进入到你项目的根目录

2. 安装依赖

npm install

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

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

4. 本地开发 启动项目

npm run dev

5. 打包正式环境

npm run build:prod

6. 打包预发布环境

npm run build:stage

7. 执行玩打包命令后会默认在项目的根目录生成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

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

  yum search nginx

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

sudo yum install -y nginx

4. 设置开机自启

  systemctl enable nginx

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

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

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

6. 将打好的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 { listen80; 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

创作挑战赛 新人创作奖励来咯，坚持创作打卡瓜分现金大奖