前端部署

这里提供两个配置方式[History、Hash]，首先修改接口地址

TIP

注意：如果是IP需设置外网IP

前端部署 - 图1

History 模式

项目默认是 History 模式，所以直接打包即可

1、打包项目

不管是将项目部署到 nginx 还是其他服务器，都需要先将项目打包

  1. npm run build:prod

2、上传文件

打包完成后会在根目录生成 dist 文件夹，我们需要将他上传到服务器中

3、Nginx 配置

在 nginx/conf/nginx.conf 添加配置

  1. server
  2.     {
  3.         listen 80;
  4.         server_name 域名/外网IP;
  5.         index index.html;
  6.         root  /home/wwwroot/eladmin/dist;  #dist上传的路径
  7.         # 避免访问出现 404 错误
  8.         location / {
  9.           try_files $uri $uri/ @router;
  10.           index  index.html;
  11.         }
  12.         location @router {
  13.           rewrite ^.*$ /index.html last;
  14.         }  
  15.     }

Hash 模式

1、修改 routers.js，取消 hash 的注释

前端部署 - 图2

2、修改根目录 vue.config.js 配置

前端部署 - 图3

Nginx 配置

打包上传方式与 History 模式一致

  1. server {
  2.        listen       80;
  3.        server_name  域名/外网IP;
  5.        location / {
  6.           root   /home/wwwroot/eladmin/dist; #dist上传的路径
  7.           index  index.html;
  8.        }
  9. }

二级目录部署

Nginx 配置

  1. server {
  2.        listen       80;
  3.        server_name  域名/外网IP;
  5.        location /dist {
  6.           root   /home/wwwroot/eladmin/test;
  7.           index  index.html;
  8.        }
  9. }

文件目录 image

注意目录名称要与配置名称一致

image