avatar

sunday

Sunday's Blog

  • 首页
Home vue3除index.html外,所有静态资源部署到阿里云oss上
文章

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

Posted 2024-05-23 Updated 2024-05- 23
By sunday
4~5 min read

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到加速域名

阿里云, 软件安装, 软件使用, vue
阿里云 软件使用 软件安装 vue3
License:  CC BY 4.0
Share

Further Reading

Jul 13, 2024

利用github actions和aliyun私有镜像库,使用docker部署Nodejs项目

1.开通阿里云容器镜像服务个人版本

May 23, 2024

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

1.在vite.config.js 中配置 base路径 import { defineConfig, loadEnv } from 'vite' const root = process.cwd() export default defineConfig(({ mode }) => { con

May 21, 2024

自动上传ssl证书到阿里云证书管理控制台中

由于oss需要自定义域名启动https,但是证书需要上传到阿里云的证书控制台上,而域名证书有效期是3个月,所以写个自动脚本更新上传 vscode新建个目录cert 然后执行 cd ./cert npm init #然后一直回车 npm i @alicloud/openapi-client @alic

OLDER

自动上传ssl证书到阿里云证书管理控制台中

NEWER

Api发消息给Telegram 群组/Bot 机器人

Recently Updated

  • nextjs15使用better-sqlite3的连接报错问题
  • nextjs + clerk + supabase + realtime 实时监听数据库更改
  • 解决nextjs15使用useLocalStorage报错的问题
  • mac上使用nodejs appium控制chrome浏览器
  • 2024年终总结

Trending Tags

nginx acme 强制跳转HTTPS nodejs 代理 mac 神器 vue3 工具 docker

Contents

©2025 sunday. Some rights reserved.

Using the Halo theme Chirpy