feat: 增加预览功能

Author: cklwblove

build/index.ts

@@ -1,16 +1,17 @@
 'use strict';
 
-const { sh, cli } = require('tasksfile');
+const {sh, cli} = require('tasksfile');
 const chalk = require('chalk');
 const rawArgv = process.argv.slice(2);
 const args = rawArgv.join(' ');
+const config = require('../vue.config.js');
 
 // 便于捕捉 build 之后的错误，然后进行自定义处理
 // 配合 jenkins 执行 job
 function command() {
   sh(`vue-cli-service build ${args}`, {
     async: true,
-    stdio: 'inherit',
+    stdio: 'inherit'
   })
     .then((output) => {
       console.log(chalk.cyan(output || ''));
@@ -25,4 +26,43 @@ function command() {
     });
 }
 
-command();
+if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
+  const report = rawArgv.includes('--report');
+
+  sh(`vue-cli-service build ${args}`, {
+    async: true,
+    stdio: 'inherit'
+  })
+    .then((output) => {
+      const port = 9526;
+      const publicPath = config.publicPath;
+
+      const connect = require('connect');
+      const serveStatic = require('serve-static');
+      const app = connect();
+
+      app.use(
+        publicPath,
+        serveStatic('./dist', {
+          index: ['index.html', '/']
+        })
+      );
+
+      app.listen(port, function () {
+        console.log(chalk.green(`> Preview at  http://localhost:${port}${publicPath}`));
+        if (report) {
+          console.log(chalk.green(`> Report at  http://localhost:${port}${publicPath}report.html`));
+        }
+      });
+    }).catch((err) => {
+    console.error('\n');
+    console.error(chalk.magenta('编译打包出错了 ~~~~(>_<)~~~~ \n'));
+    console.error(chalk.magenta('具体错误信息如下 \n'));
+    console.error(chalk.red(`${err}.\n`));
+    console.log(chalk.red('  Build failed with errors.\n'));
+    process.exit(1);
+  });
+} else {
+  command();
+}
+

package-lock.json

@@ -7,6 +7,8 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
+    "build:stage": "vue-cli-service build --mode staging",
+    "preview": "node build/index.ts --preview",
     "lint": "vue-cli-service lint",
     "deploy": "npm run build && node build/zip.ts",
     "analyz": "vue-cli-service build --mode analyz",
@@ -70,6 +72,7 @@
     "@types/node": "^10.12.18",
     "@types/nprogress": "^0.0.29",
     "@types/screenfull": "^3.3.2",
+    "@types/serve-static": "^1.13.3",
     "@types/sortablejs": "^1.7.2",
     "@types/store": "^2.0.1",
     "@types/webpack-env": "^1.13.6",
@@ -93,6 +96,7 @@
     "progress-bar-webpack-plugin": "^1.12.1",
     "script-ext-html-webpack-plugin": "^2.1.3",
     "script-loader": "^0.7.2",
+    "serve-static": "^1.14.1",
     "style-resources-loader": "^1.2.1",
     "typescript": "^3.2.2",
     "vue-cli-plugin-element": "^1.0.1",