升级vue-client框架

client/build/checkNodeVersion.js

+
+var semver = require('semver')
+
+var requiredVersion = require('../package.json').engines.node
+function checkNodeVersion (wanted, id) {
+  if (!semver.satisfies(process.version, wanted)) {
+    console.log('\x1b[91m%s\x1B[0m',
+      'You are using Node ' + process.version + ', but this version of ' + id +
+      ' requires Node ' + wanted + '.\nPlease upgrade your Node version.'
+    )
+    process.exit(1)
+  }
+}
+
+checkNodeVersion(requiredVersion, '`node uploadAliyunCDN.js`')

client/build/config.js

 const isDev = process.env.NODE_ENV
+const RegStrs = require('./regExpStr.js')
 
 let config = {
   isDev: isDev,
@@ -12,6 +13,8 @@ let config = {
 
   isHttps: true,
 
+  isEnableToIphoneDebugger: false,
+
   CDN_BASE: 'https://zws-imgs-pub.ezijing.com/',
   CDN_DIR: 'static/build/learn-mba/',
   isUploadStatic: false,
@@ -19,10 +22,12 @@ let config = {
   webpack: {}
 }
 
+config.RegStrs = RegStrs
+
 let vueClientConfig = {}
-config.domain = 'dev.ezijing.com'
+config.domain = ''
 if (config.isDev === 'development') {
-  config.url = 'http://dev.ezijing.com:12002'
+  config.url = 'http://' + config.domain + ':12002'
   try {
     vueClientConfig = require('../.config.dev.js')
   } catch (error) {

client/build/getSSL.js

+
+const fs = require('fs')
+const path = require('path')
+const request = require('request')
+
+const _conf = require('./config')
+fs.writeFileSync(path.join(__dirname, _conf.domain + '.key'), '', { encoding: 'utf8', mode: 0o755 })
+fs.writeFileSync(path.join(__dirname, _conf.domain + '.pem'), '', { encoding: 'utf8', mode: 0o755 })
+request('https://ssl.godzyx.com/' + _conf.domain + '/' + _conf.domain + '.key?get=allow').pipe(fs.createWriteStream(path.join(__dirname, _conf.domain + '.key')))
+request('https://ssl.godzyx.com/' + _conf.domain + '/' + _conf.domain + '.pem?get=allow').pipe(fs.createWriteStream(path.join(__dirname, _conf.domain + '.pem')))

client/build/regExpStr.js

+/* 由于正则表达式，不能进行跟 gulpfile 中 去注释 在一起 */
+module.exports = {
+  regExp_static: /('|"|`)[\.|\/]*?static\/(.*?\.(png|jpe?g|gif|svg|ico)(\?.*)?)\1/g
+}

client/build/stringReplaceLoader.js

+const _conf = require('./config')
+
+module.exports = function (source) {
+  if (_conf.isDev !== 'development') {
+    return source
+            .replace(_conf.RegStrs.regExp_static, '$1' + _conf.CDN_BASE + _conf.CDN_DIR + 'static/$2$1')
+  } else {
+    return source
+  }
+}

client/build/uploadAliyunCDN.js

-/**
- * 本文件执行，需要 node -v >= v8.11.3
- * 原因：其中使用很多es6新特性，需要高版本才能直接识别并运行
- * 放服务器上 上传慢，而且经常报错（没找到原因），最后改为打包完成后自动上传不在服务器上deploy时再上传了
- */
+
 const fs = require('fs')
 const path = require('path')
 
-// 这个包本身也是用es6语法写的，低版本node编译解析不了
 const OSS = require('ali-oss')
 
 const conf = require('./config')
@@ -18,30 +13,21 @@ const client = new OSS({
   bucket: 'zws-imgs-pub'
 })
 
-// 通过请求头设置限速。
 const headers = {
-  'x-oss-traffic-limit': 8 * 1024 * 100 * 100 // 设置限速，最小100KB/s。设置为 10000KB/s
+  'x-oss-traffic-limit': 8 * 1024 * 100 * 100
 }
 
-/* 定位到对应 public目录下 */
 const DIR_PATH = path.join(__dirname, '../' + conf.DesDir)
-/* 上传对应目录 */
 const PREFIX_PATH = conf.CDN_DIR
-/* 是否上传static目录 */
 const isUploadStatic = conf.isUploadStatic
 
 let fileCount = 1
-/**
- * 调用接口，单个文件上传
- * @param {string} dirPath 传入对应需要遍历的路径
- * @param {function} callback 加入一个回调方法，执行文件上传
- */
 async function uploadFile (prefixPath, dirFileName) {
   try {
     const upFilePath = prefixPath.replace(new RegExp(DIR_PATH, 'gi'), '') + path.basename(dirFileName)
     const result = await client.put(prefixPath + path.basename(dirFileName), dirFileName, {
       headers,
-      timeout: 600000 // 默认超时时长为60000ms。超时直接报错，限速上传时注意修改超时时长。设置为600s
+      timeout: 600000
     })
     if (result.res.status === 200) {
       console.log('第' + fileCount++ + '个文件，已上传：' + conf.CDN_BASE + upFilePath)
@@ -53,24 +39,14 @@ async function uploadFile (prefixPath, dirFileName) {
   }
 }
 
-/**
- * 循环遍历文件，准备上传文件
- * 原生js 遍历方法
- * @param {string} dirPath 传入对应需要遍历的路径
- * @param {function} callback 加入一个回调方法，执行文件上传
- */
 function uploadfiles (dirPath, callback) {
-  /* 根据文件路径读取文件 */
   const files = fs.readdirSync(dirPath)
   files.forEach(function (filename, i) {
     const filedir = path.join(dirPath, filename)
     const info = fs.statSync(filedir)
     if (info.isDirectory()) {
-      /* 确定是否上传 */
       if (!(isUploadStatic ? true : filename !== 'static')) { return }
-      /* 得到对应目录结构 */
       const morePath = filedir.replace(new RegExp(DIR_PATH, 'gi'), '') + '/'
-      /* 递归，如果是文件夹，就继续遍历该文件夹下面的文件 */
       uploadfiles(filedir, function (filedir) {
         uploadFile(path.join(PREFIX_PATH, morePath), filedir)
       })
@@ -85,5 +61,4 @@ function uploadfiles (dirPath, callback) {
   return true
 }
 
-/* 批量上传文件 */
 uploadfiles(DIR_PATH, null)

client/build/webpack.base.conf.js

@@ -7,6 +7,7 @@ const _conf = require('./config')
 const $GLOBAL = {
   isDev: _conf.isDev,
   ResDir: _conf.ResDir,
+  'isEnableToIphoneDebugger': _conf.isEnableToIphoneDebugger,
 
   templatePath: path.resolve(__dirname, '../' + _conf.HtmlPath),
   icoPath: _conf.IcoPath,
@@ -24,6 +25,7 @@ const $GLOBAL = {
   webConf: {
     'isDev': _conf.isDev,
     'serverPort': process.env.SERVER_PORT || 8000,
+    'isEnableToIphoneDebugger': _conf.isEnableToIphoneDebugger,
     'domain': _conf.domain,
     'url': _conf.url,
     'isHttps': _conf.isHttps,
@@ -51,7 +53,7 @@ $GLOBAL.BaseConfig = {
       '@action': path.resolve(__dirname, '../' + $GLOBAL.ResDir + '/action'),
       '@tool': path.resolve(__dirname, '../' + $GLOBAL.ResDir + '/tool')
     },
-    extensions: ['.js', '.jsx', '.json', '.vue']
+    extensions: ['.js', '.json', '.jsx', '.vue']
   },
   module: {
     rules: [
@@ -61,6 +63,12 @@ $GLOBAL.BaseConfig = {
         exclude: /node_modules/,
         enforce: 'pre'
       },
+      {
+        test: /\.(vue|js|jsx)|((sa|sc|c)ss)$/,
+        loader: './build/stringReplaceLoader.js',
+        exclude: /node_modules/,
+        enforce: 'pre'
+      },
       {
         test: /\.vue$/,
         loader: 'vue-loader'

client/build/webpack.client.conf.js

@@ -9,7 +9,9 @@ const VueLoaderPlugin = require('vue-loader/lib/plugin')
 const AutoPrefixer = require('autoprefixer')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
+const HtmlReplaceWebpackPlugin = require('html-replace-webpack-plugin')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
+const VconsoleWebpackPlugin = require('vconsole-webpack-plugin')
 const $GLOBAL = require('./webpack.base.conf')
 
 
@@ -26,9 +28,10 @@ if ($GLOBAL.isDev === 'development') {
       port: $GLOBAL.webConf.serverPort,
       disableHostCheck: false,
       host: $GLOBAL.webConf.domain || 'localhost',
+      http2: false,
       https: $GLOBAL.webConf.isHttps && {
-        key: fs.readFileSync(path.join(__dirname, '../static/cert/dev.ezijing.com.key')),
-        cert: fs.readFileSync(path.join(__dirname, '../static/cert/dev.ezijing.com.pem'))
+        key: fs.readFileSync(path.join(__dirname, $GLOBAL.webConf.domain + '.key')),
+        cert: fs.readFileSync(path.join(__dirname, $GLOBAL.webConf.domain + '.pem'))
       },
       overlay: {
         errors: true
@@ -77,7 +80,7 @@ if ($GLOBAL.isDev === 'development') {
             }
           },
           {
-            loader: 'sass-loader', // 不再使用本身默认 node-sass，部分mac安装有问题。
+            loader: 'sass-loader',
             options: {
               implementation: require('dart-sass')
             }
@@ -92,6 +95,10 @@ if ($GLOBAL.isDev === 'development') {
         template: $GLOBAL.templatePath,
         inject: true,
         favicon: $GLOBAL.icoPath
+      }),
+      new VconsoleWebpackPlugin({
+        filter: [],
+        enable: $GLOBAL.isEnableToIphoneDebugger
       })
     ]
   })
@@ -100,7 +107,7 @@ if ($GLOBAL.isDev === 'development') {
     mode: 'production',
     entry: {
       app: $GLOBAL.EntryPath,
-      vendor: ['vue', 'vue-router']
+      vendor: ['vue', 'vue-router', 'vue-i18n']
     },
     module: {
       rules: [{
@@ -128,7 +135,7 @@ if ($GLOBAL.isDev === 'development') {
             }
           },
           {
-            loader: 'sass-loader', // 不再使用本身默认 node-sass，部分mac安装有问题。
+            loader: 'sass-loader',
             options: {
               implementation: require('dart-sass')
             }
@@ -152,6 +159,12 @@ if ($GLOBAL.isDev === 'development') {
           collapseWhitespace: true
         }
       }),
+      new HtmlReplaceWebpackPlugin([
+        {
+          pattern: $GLOBAL.RegStrs.regExp_static,
+          replacement: '$1' + $GLOBAL.webConf.CDN_PATH + 'static/$2$1'
+        }
+      ]),
       new CopyWebpackPlugin([
         {
           from: $GLOBAL.EntryStaticPath,
@@ -161,7 +174,11 @@ if ($GLOBAL.isDev === 'development') {
             return content
           }
         }
-      ])
+      ]),
+      new VconsoleWebpackPlugin({
+        filter: [],
+        enable: $GLOBAL.isEnableToIphoneDebugger
+      })
     ],
     optimization: {
       runtimeChunk: {
@@ -170,27 +187,19 @@ if ($GLOBAL.isDev === 'development') {
       splitChunks: {
         chunks: 'async',
         minSize: 30000,
-        maxSize: 400000, // 大于400kb 会再进行拆分，可以进行优化时，添加
+        maxSize: 400000,
         minChunks: 1,
-        maxAsyncRequests: 5, // 按需加载块时并行请求的最大数量
-        maxInitialRequests: 3, // 初始页面加载时并行请求的最大数量
+        maxAsyncRequests: 5,
+        maxInitialRequests: 3,
         name: false,
         cacheGroups: {
-          vendor: { // 将所有node_modules中模块 js打包到一起，并拆分
+          vendor: {
             name: 'vendor',
             chunks: 'initial',
             priority: -10,
             reuseExistingChunk: false,
             test: /node_modules\/(.*)\.js/
           },
-          // styles: { // 将所有node_modules中模块 css、scss打包到一起，并拆分，暂时没用，还在研究
-          //   name: 'styles',
-          //   test: /node_modules\/\.(sa|sc|c)ss$/,
-          //   chunks: 'all',
-          //   minChunks: 1,
-          //   reuseExistingChunk: true,
-          //   enforce: true
-          // }
         }
       }
     }

client/package.json

 {
   "name": "@god/vue-client",
-  "version": "3.0.5",
+  "version": "3.0.11",
   "description": "适应于公司全系统的纯客户端开发模型",
   "main": "index.js",
   "scripts": {
     "lint": "eslint --ext .js --ext .jsx --ext .vue src/",
     "lint:fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/",
-    "dev": "cross-env NODE_ENV=development SERVER_PORT=3001 webpack-dev-server --inline --progress --config build/webpack.client.conf.js",
-    "build:test": "cross-env NODE_ENV=test webpack --progress --config build/webpack.client.conf.js && cross-env NODE_ENV=test n use 8.11.3 ./build/uploadAliyunCDN.js",
-    "build:pro": "cross-env NODE_ENV=production webpack --progress --config build/webpack.client.conf.js && cross-env NODE_ENV=production n use 8.11.3 ./build/uploadAliyunCDN.js"
+    "dev": "npm run check:node && cross-env NODE_ENV=development node build/getSSL.js && cross-env NODE_ENV=development SERVER_PORT=3001 webpack-dev-server --inline --progress --config build/webpack.client.conf.js",
+    "build:test": "npm run check:node && cross-env NODE_ENV=test webpack --progress --config build/webpack.client.conf.js && cross-env NODE_ENV=test node ./build/uploadAliyunCDN.js",
+    "build:pro": "npm run check:node && cross-env NODE_ENV=production webpack --progress --config build/webpack.client.conf.js && cross-env NODE_ENV=production node ./build/uploadAliyunCDN.js",
+    "check:node": "node build/checkNodeVersion.js"
   },
   "repository": {
     "type": "git",
@@ -60,7 +61,11 @@
     "webpack": "^4.42.1",
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.10.3",
-    "webpack-merge": "^4.2.2"
+    "webpack-merge": "^4.2.2",
+    "html-replace-webpack-plugin": "^2.5.6",
+    "request": "^2.88.2",
+    "semver": "^1.1.4",
+    "vconsole-webpack-plugin": "^1.5.2"
   },
   "dependencies": {
     "axios": "^0.19.2",