文章

vue3除index.html外,所有静态资源部署到阿里云oss上

1.在vite.config.js 中配置 base路径

import { defineConfig, loadEnv } from 'vite'
const root = process.cwd()
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, root, '')
  const isDev = mode === 'development'
  return {
    base: !isDev ? `https://your-cdn-domain/` : '/',
  }
)}

2.将build 打包后的dist里的所有文件上传到oss

上传可参考本站帖子:阿里云oss部署vue3单页应用/静态文件

index.html部署到自己的服务器上,这样可大大减少服务器的带宽压力,并且可以用nginx 的网络4层或7层协议上做一些自定义的操作,比如根据请求头header做重定向等

注意:vue-router 里的 createWebHistory()方法也要适配,有些框架会默认根据base来设置值的

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: () => import('@/views/login/index.vue')
    }
  ]
})

3.可开启阿里云的传输加速及CDN,可选

  • 3.1 开启传输加速后,有一个阿里云的加速域名

  • 3.2 设置CDN域名后,可设置回源域名/IP到加速域名

许可协议:  CC BY 4.0