vue3笔记（22）多环境发版脚本

分了开发环境、测试环境、demo演示环境、生产环境四个环境，对应API不一样，vite打包一次接近5分钟，如果改个bug就要重新发版，那老夫就不能准时下班了。
为了解决这个问题，写了个多环境一键发版脚本。

原方式

deploy.bash脚本写了多个环境的发版，分别执行，虽然没啥问题，但是人力成本、时间成本略大。

1
2
3
4
5
# **环境
npm run build:test
rm -rf cardlc
mv dist cardlc
scp -r cardlc/  root@***:/data/

新方式

在public/static/config.js中写入全局变量，打包后通过脚本分别修改不同环境的请求API地址，然后发布到服务器。

1
2
3
4
window.g = {
  apiUrl: "http://10.10.34.31:8087",
  tag: "1"
}

buildMultiEnv.js脚本进行文件读写

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
let fs = require("fs");

const filePath = './dist/static/config.js'
const changeBuildUrl = () => {
  fs.readFile(filePath, function(err, data) {
    if(err) {
      console.log(err)
      return
    } 
    let str = data.toString()
    const tag = str.split('tag: "')[1].split('"')[0]
    console.log(tag)
    let content = ''
    if(tag == '1') { // 开发环境
      content = 'window.g={apiUrl:"http://***.31:8080",tag: "2"}'
    } else if(tag == '2') { // 测试环境
      content = 'window.g={apiUrl:"http://***.32:8080",tag: "3"}'
    } else if(tag == '3') { // demo环境
      content = 'window.g={apiUrl:"http://***.31:8089",tag: "1"}'
    }else {}
    fs.writeFile(filePath, content, (err) => {
      if (err) {
        console.log("写入失败", err);
      } else {
        console.log("写入成功。");
      }
    })
  })
};
changeBuildUrl();

deplay.bash 最终脚本，生产环境涉及一些特殊处理，单独罗列。
一定要注意先把之前的文件清空，不然生成的新文件会被移动到旧文件里面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 开发环境、测试环境、演示demo环境一键更新
rm -rf cardlc
npm run build:test
node ./buildMultiEnv.js 
cp -r dist cardlc
scp -r cardlc/  root@***.31:/data/
rm -rf cardlc
node ./buildMultiEnv.js 
cp -r dist cardlc
scp -r cardlc/  root@***.32:/data/
rm -rf cardlc
node ./buildMultiEnv.js 
cp -r dist cardlc
scp -r cardlc/  root@***.31:/data/demo

# 生产环境
npm run build:prod
rm -rf cardlc
mv dist cardlc
scp -r cardlc/  root@***.33:/data/

试了一下，打包完之后上传至服务器，输入密码，再次执行两次，非常丝滑，nice～