【从java到Go】Vue3打包发布到OSS

【提问】

如何打包发布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
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

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======"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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

4、运行脚本

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

sh deploy.sh
1