vue3+vite项目优化静态资源使用云存储

发布时间 2023-12-01 17:27:46作者: 码农小哥。

项目中的问题

1. 当我们在维护自己的博客或者自己的网站的时候没有特别好的服务器就会响应特别的慢

2. 当我们项目特别大的时候也会首屏加载特别慢而且 vue项目打包后的js文件特别的庞大 还要加载各种资源就会特别的卡顿

3.当我们项目中用到了一些3D效果各种3D资源部特别的大的时候根本加载不出来

解决方案 

使用cdn加速 将静态资源存入oss

1、在vue.config.ts中

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
export default defineConfig({
    plugins: [
        vue()
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    },
    base:"https://xxxxxx",  //CND引入静态资源 测试环境
})
 
2、将打包好的静态资源assets文件上传到oss云存储。
 
3、oss云存储会出现跨域,要让后端改一下配置允许跨域。

我亲测这一套下来速度有明显的提升,而且如果是在国外的环境下效果显著。