ci: add CDN_URL and post-build.js

package.json

@@ -1,10 +1,10 @@
 {
-  "name": "my-project",
-  "version": "0.1.0",
+  "name": "temporay-parking",
+  "version": "1.0.0",
   "private": true,
   "scripts": {
     "serve": "cross-env NODE_ENV=dev vue-cli-service serve",
-    "build": "vue-cli-service build",
+    "build": "vue-cli-service build && node post-build.js",
     "test:h5": "cross-env UNI_PLATFORM=h5 jest -i"
   },
   "dependencies": {

post-build.js

@@ -0,0 +1,47 @@
+// post-build.js
+'use strict';
+const fs = require('fs');
+
+/**
+ * 获取当前所在的 git commit 的 commit id
+ * @returns {string} 执行成功时返回 commit id；否则返回 git_hash_error
+ * https://stackoverflow.com/a/56975550/196519
+ */
+const git_hash = () => {
+  try {
+    const rev = fs.readFileSync('.git/HEAD').toString().trim().split(/.*[: ]/).slice(-1)[0];
+    if (rev.indexOf('/') === -1) {
+      return rev;
+    } else {
+      return fs.readFileSync('.git/' + rev).toString().trim();
+    }
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.log(e);
+    return 'git_hash_error';
+  }
+}
+
+/**
+ * 插入 build info 到 index.html 中
+ */
+const updateIndexHtml = () => {
+  const htmlPath = 'dist/index.html';
+  let html = fs.readFileSync(htmlPath).toString();
+  html += '\r\n<!-- ';
+  html = html + '\r\n build time:' + new Date().toUTCString() + '; ';
+  // process.env.BUILD_NUMBER 是 Jenkins 执行 job 时传入的 env
+  html = html + '\r\n BUILD_NUMBER:' + process.env.BUILD_NUMBER + '; ';
+  html = html + '\r\n GIT_COMMIT:' + git_hash() + '; ';
+  html += '\r\n -->';
+
+  fs.writeFileSync(htmlPath, html);
+  // eslint-disable-next-line no-console
+  console.log(`Insert timestamp and env into index.html. -- DONE`);
+}
+
+const postBuild = () => {
+  updateIndexHtml();
+}
+
+postBuild();

vue.config.js

@@ -1,9 +1,12 @@
 const path = require('path');
 const postcssPxToViewport = require('./postcss.config');
 const vueSrc = 'src';
+const CDN_URL = process.env.CDN_URL || '';
 
 module.exports = {
-  assetsDir: './src/static',
+  publicPath:
+    process.env.NODE_ENV === 'production' ? (CDN_URL ? CDN_URL : '/') : '/',
+  assetsDir: 'static',
   css: {
     loaderOptions: {
       // 给 less-loader 传递 Less.js 相关选项
@@ -45,6 +48,28 @@ module.exports = {
         return args;
       })
       .end();
+    config.module
+      .rule('images') //.test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
+      .use('url-loader')
+      .tap((args) => {
+        const newArgs = Object.assign({}, args, {
+          limit: 4096,
+          // 这里重要，publicPath 配置给url-loader 会不生效，必须配置到fallback里传递给file-loader
+          fallback: {
+            loader: 'file-loader',
+            options: {
+              name: '[name].[hash:8].[ext]',
+              publicPath:
+                process.env.NODE_ENV === 'production'
+                  ? CDN_URL + '/static/img'
+                  : '/static/img',
+              outputPath: 'static/img',
+            },
+          },
+        });
+        return newArgs;
+      })
+      .end();
   },
   configureWebpack: {
     resolve: {