Vue3+Vite打包跨平台(七牛、阿里OSS)上传部署前端项目

本文主要是介绍Vue3+Vite打包跨平台(七牛、阿里OSS)上传部署前端项目，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、业务场景

阅读之前，想了解一下各位观众老爷们，你们公司的项目是怎么部署的：

• 1.本地打包手动上传服务器；
• 2.本地打包自动上传服务器；
• 3.代码仓库流水线自动构建；
• 4.其他…；

我们用的第3种部署方式，仓库代码合并到release之后自动打包部署，不过这个过程很耗费时间，且流水线是要收钱的。有一天，流水线到期了，部门主管打算节约成本，于是就开始让我们自己写一个脚本，用来部署公司项目；

前端静态资源(项目图片、icon、打包css、js)文件放在七牛，域名是阿里的OSS，这种情况和大多数部署方式不同，你们一般直接把所有静态资源放在服务器就行，然后用域名指向服务器ip; 但是对于公司有很多个项目，每个项目都有自己的域名，数据库、redis等的时候，服务器的压力就会很大。如果把服务器的静态资源分出去，且部署在OSS上，对服务器的压力会相对少很多，说干就干；

2、具体实现

npm install ssh2-sftp-client
npm install qiniu

根目录下新建sftp.prod.js文件;

sftp.prod.js 主要用于将打包后的 index.html 文件上传到阿里OSS；

// sftp.prod.js
const path = require("path");
// eslint-disable-next-line no-undef
const SftpClient = require("ssh2-sftp-client");const sftp = new SftpClient();let options = {port:"",host: "", // sftp地址username:"",password:"",localPath:path.join(__dirname, "dist/index.html")
};const { port, host, username, password} = options;
sftp.connect({host,port,username,password
}).then(async() => {await sftp.put(options.localPath, "/html/index.html");console.log("str===>>>>上传结束");return Promise.resolve();
}).then((res)=>{sftp.end();}).catch((err) => {console.log(err);sftp.end();});

vite.config.js 七牛云配置如下，将css、js等文件上传到指定空间；

// vite.config.js
import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import Components from 'unplugin-vue-components/vite';
import cleaner from 'rollup-plugin-cleaner'; //如果使用 rollup 之后 emptyOutDir 会失效,需要使用这个插件清空上次构建结果import qiniu from 'qiniu'
import {qiniuPlugin} from '@puhaha/vite-plugin-upload-oss'
const QINIU_ACCESS_KEY = ""; // 七牛ACCESS_KEY
const QINIU_SECRET_KEY = ""; // 七牛SECRET_KEYconst ossConfig ={sdk: qiniu,accessKey: QINIU_ACCESS_KEY,secretKey: QINIU_SECRET_KEY,bucket: 'static',filePath: './dist',appName:"", publicCdnPath: '', // 七牛域名空间remoteFilePath: '', // 静态资源存放目录uploadTarget:"./dist",openConfirm: false,enabledRefresh: true,excludeHtml:true
};// https://vitejs.dev/config/
export default ({mode}) => {console.log("mode--->", mode);return defineConfig({base: mode=='production' ? `${ossConfig.publicCdnPath}${ossConfig.remoteFilePath}` : '',define: {// 具体环境设置是否开启__VUE_PROD_DEVTOOLS__: true},plugins: [vue(),vueJsx(),qiniuPlugin(ossConfig),],server: {host: true},resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}},build: {assetsDir: "",emptyOutDir: true,rollupOptions: {output: {dir: "dist/",format: "iife"},plugins: [cleaner({targets: ['dist/']})]},cssCodeSplit: false,}});
}

3.如何使用

package.json build 后面加上 && node sftp.prod.js, 表示执行npm run build的时候自动执行sftp.prod.js这个文件；

这篇关于Vue3+Vite打包跨平台(七牛、阿里OSS)上传部署前端项目的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---