关于利用oss托管vue的前后端分离项目

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

关于利用oss托管vue的前后端分离项目

前情提要

对于学生机或者小带宽的服务器来说，第一次加载巨大的js文件简直就是噩耗，特别是宝贵的面试官的时间，这样的网站都不忍心写到简历上去。更何况是用户的时间，所以就考虑有没有可以在不买大带宽服务器的情况下该怎么优化呢？经过简单的调研可以有以下的方式：

  • 1、在打包的同时，把依赖的第三方库js与css利用开源免费的cdn加载方式，例如

这个就是直接写，也可以在webpack时利用插件区分出来…

  • 2、在部署的时候开启nginx的gzip自己调节参数，找到一个合适自己的网站的参数组合.

server {
    listen 80;
    # gzip config
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";
    #..
    }

  • 3、对静态资源进行cdn加速（可以用七牛云、阿里云云等产商）

  • 4、利用oss部署的方式（也是我想说的方式）其中主要困难有对url再次刷新时的重定向以及前端项目的生产项目api请求地址的配置…

具体做法

接下来我结合一个项目演示：https://github.com/zhangdaiscott/jeecg-boot

修改public/index.html的全局地址与图片地址为图中所示…(官方后端)


修改utils/request.js的baseURL如图所示。这个时候build的生产文件就可以直接用了。

vue打包上传oss

接下来主要参考如上文章：

OSS (Object Storage Service)名为对象存储，配合cdn使用达到静态文件托管加速，提升网站文件访问速度…(乱说一通)

打包好vue文件之后，在阿里云控制台找到对象存储OSS，新建一个Bucket，设置好名称，区域，存储类型，读写权限，如图：

点确定就创建好了Bucket，接下来在基础设置中设置静态页面->默认首页为index.html并且在镜像回源中设置重定向，如图：

为什么要这样做，原因是vue-router我设置的是history模式，大家都知道history模式在线上需要配置nginx，如果不配置的话刷新就会导致页面丢失。在这里配置重定向就可以解决这个问题，需要注意的几个点：1是回溯条件选择HTTP状态码为404的时候，2是回溯地址要选择跳转固定地址，带上默认首页index.html。

剩下的就交给阿里云了吧(完)。


最后结果就是本来一个js1.7m现在有阿里云oss的带宽以及自动cdn以及gizp压缩，大大加快了访问速度。
这个不知道什么时候会过期~结果展示。f12看细节

以上是 关于利用oss托管vue的前后端分离项目 的全部内容， 来源链接： utcz.com/z/375512.html

回到顶部