我们对前端vue项目编译打包，编译打包完成之后，在自动生成的dist文件夹就只剩下一堆 js、css 以及 html 文件了。

npm run build

然后我们把这些编译打包后的文件拷贝到后端项目中，这样再去运行就不存在跨域问题。将编译打包后的静态文件拷贝到 Spring Boot 项目的 src/main/resources/static 目录下，直接运行Spring Boot项目访问即可。

如果使用了Spring Security或Shiro框架的话，需要注意配置静态文件不进行拦截。

使用Nginx实现动静分离部署，可以有效提高项目的运行效率。

我们项目中的资源包含动态资源和静态资源两种，其中：

动态资源就是那些需要经过容器处理的资源，例如 jsp、freemarker、各种接口等。

静态资源则是那些不需要经过容器处理，收到客户端请求就可以直接返回的资源，像 js、css、html 以及各种格式的图片，都属于静态资源。

将动静资源分开部署，可以有效提高静态资源的加载速度以及整个系统的运行效率。在前后端分离项目部署中，我们用 Nginx 来做一个反向代理服务器，它既可以代理动态请求，也可以直接提供静态资源访问。

后端项目可以在一个非 80 端口上部署，部署成功之后，因为这个后端项目只是提供接口，所以我们并不会直接去访问他。而是通过 Nginx 请求转发来访问这个后端接口。命令：

nohup java -jar subtlechat.jar > subtlechat.log &

对应的Nginx配置，首先配置上游服务器：

upstream javahai.top{
  server 127.0.0.1:9999 weight=2;
}

在这里主要是配置服务端的地址，如果服务端是集群化部署，那么这里就会有多个服务端地址，然后可以通过权重或者 ip hash 等方式进行请求分发。 然后在 server 中配置转发规则：

location / {
   proxy_pass http://javahai.top;
   proxy_redirect default;
}

以 Vue 为例，如果是 SPA 应用，项目打包之后，就是一个 index.html 还有几个 js、css、images 以及 fonts ，这些都是静态文件，我们将静态文件首先上传到服务器，然后在 nginx.conf 中配置静态资源访问，具体配置如下：

location ~ .*\.(js|css|ico|png|jpg|eot|svg|ttf|woff|html|txt|pdf|){
   root /project/subtle-chat/dist/;所有静态文件直接读取硬盘
   expires 30d;#cache 30 days
}

这里是按照资源类型来拦截的，即后缀为 js、css、ico 等的文件，统统都不进行请求分发，直接从本地的 /usr/local/nginx/html/ 目录下读取并返回到前端（我们需要将静态资源文件上传到 /project/subtle-chat/dist/ 目录下）。

完整的Nginx配置文件如下：

worker_processes  1;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;



    sendfile        on;


    keepalive_timeout  65;


    upstream javahai.top{
       server 10.0.16.14:8082;
    }

    server {
       listen 80;
       server_name localhost;

       location / {
            proxy_pass http://javahai.top;
            proxy_redirect default;
       }
      
      location ~ .*\.(js|css|ico|png|jpg|eot|svg|ttf|woff|html){
            root /project/subtle-chat/dist/;
            expires 30d;#cache 30 days
      }
        
    }
}

如果我们的服务器上部署了多个项目，这种写法就不太合适，因为多个项目的前端静态文件肯定要分门别类，各自放好的，这个时候我们一样可以通过路径来拦截，配置如下：

location /subtlechat/ {
   root /project/subtle-chat/dist/;#所有静态文件直接读取硬盘
   expires 30d; #缓存30天
}

这样，请求路径是 /subtlechat/ 格式的请求，则不会进行请求分发，而是直接从本机的 /usr/local/nginx/html/subtlechat/ 目录下返回相关资源。采用这种方式配置静态资源，同时后端接口做了相应的区分。我们就可以部署多个项目了，多个项目的部署方式和上面的一样。

这样部署完成之后，假设我的域名是 javahai.top ，那么用户通过 http://www.javahai.top/subtlechat/**格式的请求就可以访问到前端资源了。