从java到GoVue3打包发布到OSS

Posted 2022-11-22 幽灵雾

【提问】

如何打包发布Vue到oss中？

【解答】

本文以Vue3+vite.config.dev.ts为例，具体步骤如下：

1、Vue中修改vite.config.dev.ts配置

要想讲Vue文件部署到oss，必须要将Vue中静态文件的引用路径改为oss的下载路径（例如：https://xxxx.oss-cn-hangzhou.aliyuncs.com/vue/xxx.js），在vite.config.dev.ts中进行配置base即可实现，如下：

import  mergeConfig  from 'vite';
import requireTransform from 'vite-plugin-require-transform';
import baseConfig from './vite.config.base';
import prismjs from 'vite-plugin-prismjs';

export default mergeConfig(
  
    //增加base配置，在build时，会将所有文件的引用由「./」改为配置的链接
    base: 'https://kid-fullstars.oss-cn-hangzhou.aliyuncs.com/vue/',
    mode: 'development',
    server: 
      host: 'www.fullstars.cn',
      port: 8000,
      // open: true,
      fs: 
        strict: true,
      ,
      https:false
    ,
    plugins: [
      prismjs(
        languages: 'all',
      ),
      requireTransform(
        fileRegex: /vuePdfNoSss.vue$/,
      ),
    ],
  ,
  baseConfig
);

2、安装命令行工具ossutil

第二步是要将我们打包好的资源包上传到oss中，oss提供了一个命令行工具ossutil，能很好的解决我们个人电脑向oss传输文件的功能，具体安装步骤见oss文档：

ossutil安装教程

3、编写shell脚本

接下来我们就开始编写Vue的编译打包，以及上传到oss的脚本，这里以Mac系统作为示例，在任意目录创建deploy.sh文件，如下：

#!/bin/bash
vueUrl="/Users/kid/vueproject" #vue工程路径
goUrl="/Users/kid/GolandProject"
ossutilUrl="/Users/kid/ossutil" #ossutil安装路径


echo "======前端打包 start======"

cd $vueUrl
rm -r dist
sudo npm run build

echo "======前端打包 end======"


echo "======前端文件上传 start======"

cd $ossutilUrl
./ossutilmac64 rm oss://burket/vue/assets -r
./ossutilmac64 cp -r "$vueUrl"/dist/assets/ oss://burket/vue/assets/

cp "$vueUrl"/dist/index.html "$goUrl"/src/api/v.html

echo "======前端文件上传 end======"

其中“oss://burket/vue/assets”为oss中的burket和具体要存放的路径

4、运行脚本

进入上述deploy.sh文件所在目录，执行如下命令即可：

sh deploy.sh