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到加速域名
License:
CC BY 4.0