1 优化dll文件提取功能，每次生成dll文件时删除旧文件

2 优化字符串截取过滤器，使包含英文和数字的字符串与中文截取长度基本一致

build/webpack.base.conf.js

@@ -3,8 +3,9 @@ var utils = require('./utils')
 var config = require('../config')
 var webpack = require('webpack')
 var vueLoaderConfig = require('./vue-loader.conf')
+var CopyWebpackPlugin = require('copy-webpack-plugin')
 
-function resolve (dir) {
+function resolve(dir) {
   return path.join(__dirname, '..', dir)
 }
 
@@ -67,10 +68,13 @@ module.exports = {
       }
     ]
   },
-  plugins:[
+  plugins: [
     new webpack.DllReferencePlugin({
       context: path.resolve(__dirname, '..'),
       manifest: require('./vendor-manifest.json')
-    })
+    }),
+    new CopyWebpackPlugin([
+      { from: 'src/dlljs', to: 'static/js' }
+    ])
   ]
 }

build/webpack.dev.conf.js

@@ -14,12 +14,12 @@ Object.keys(baseWebpackConfig.entry).forEach(function (name) {
 })
 
 // 获取带hash值的dll文件名称
-var glob=require('glob')
+var glob = require('glob')
 var dllJsFilePath,
-    dllJsFileName
-dllJsFilePath=glob.sync(path.join(__dirname, '../src/vendor_*.dll.js'))[0]
-if (dllJsFilePath){
-  dllJsFileName= path.basename(dllJsFilePath)
+  dllJsFileName
+dllJsFilePath = glob.sync(path.join(__dirname, '../src/dlljs/vendor_*.dll.js'))[0]
+if (dllJsFilePath) {
+  dllJsFileName = path.basename(dllJsFilePath)
 }
 
 module.exports = merge(baseWebpackConfig, {
@@ -40,25 +40,24 @@ module.exports = merge(baseWebpackConfig, {
       filename: 'index.html',
       favicon: './src/assets/img/favicon.ico',
       template: 'index.html',
-      dllJsFileName : dllJsFileName,
+      dllJsFileName: dllJsFileName,
       inject: true
     }),
 
     // 拷贝mock数据文件到构建目录
     new CopyWebpackPlugin([
-            { from: 'src/mock', to: 'mock' },
-            { from: 'src/vendor_*.dll.js', to: 'static/js/[name].[ext]' }
+      { from: 'src/mock', to: 'mock' }
     ], {
-      // 忽略选项
-      ignore: [
-      // Doesn't copy any files with a txt extension
-        '*.txt'
-      ],
-      // By default, we only copy modified files during
-      // a watch or webpack-dev-server build. Setting this
-      // to `true` copies all files.
-      copyUnmodified: true
-    }),
+        // 忽略选项
+        ignore: [
+          // Doesn't copy any files with a txt extension
+          '*.txt'
+        ],
+        // By default, we only copy modified files during
+        // a watch or webpack-dev-server build. Setting this
+        // to `true` copies all files.
+        copyUnmodified: true
+      }),
     new FriendlyErrorsPlugin()
   ]
 })

build/webpack.dll.conf.js

@@ -2,8 +2,13 @@ const path = require('path')
 const webpack = require('webpack')
 var vueLoaderConfig = require('./vue-loader.conf')
 var HtmlWebpackPlugin = require('html-webpack-plugin')
+const RemoveWebpackPlugin = require('remove-webpack-plugin')
 
-function resolve (dir) {
+console.log('=======================================')
+console.log('   请确保将新增的dll文件提交至git/svn   ')
+console.log('=======================================')
+
+function resolve(dir) {
   return path.join(__dirname, '..', dir)
 }
 
@@ -18,7 +23,7 @@ module.exports = {
     ]
   },
   output: {
-    path: path.resolve(__dirname, '../src'),
+    path: path.resolve(__dirname, '../src/dlljs'),
     filename: '[name]_[hash].dll.js',
     library: '[name]_[hash]'
   },
@@ -37,7 +42,6 @@ module.exports = {
     ]
   },
   plugins: [
-    // new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /zh-cn|en-gb/),
     new webpack.DllPlugin({
       path: path.join(__dirname, '.', '[name]-manifest.json'),
       libraryTarget: 'commonjs2',
@@ -47,6 +51,8 @@ module.exports = {
       compress: {
         warnings: false
       }
-    })
+    }),
+    // remove vendor.***.dll.js
+    new RemoveWebpackPlugin('src/dlljs')
   ]
 }

build/webpack.prod.conf.js

@@ -8,17 +8,15 @@ var HtmlWebpackPlugin = require('html-webpack-plugin')
 var ExtractTextPlugin = require('extract-text-webpack-plugin')
 var PrerenderSpaPlugin = require('prerender-spa-plugin')
 var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
-var CopyWebpackPlugin = require('copy-webpack-plugin')
 var env = config.build.env
 
 // 获取带hash值的dll文件名称
-var glob=require('glob')
+var glob = require('glob')
 var dllJsFilePath,
-    dllJsFileName
-dllJsFilePath=glob.sync(path.join(__dirname, '../src/vendor_*.dll.js'))[0]
-if (dllJsFilePath){
-  // dllJsFileName= dllJsFilePath.split('src/')[1]
-  dllJsFileName= path.basename(dllJsFilePath)
+  dllJsFileName
+dllJsFilePath = glob.sync(path.join(__dirname, '../src/dlljs/vendor_*.dll.js'))[0]
+if (dllJsFilePath) {
+  dllJsFileName = path.basename(dllJsFilePath)
 }
 
 var webpackConfig = merge(baseWebpackConfig, {
@@ -42,7 +40,7 @@ var webpackConfig = merge(baseWebpackConfig, {
     // http://vuejs.github.io/vue-loader/en/workflow/production.html
     new webpack.DefinePlugin({
       'process.env': env
-    }),   
+    }),
     new webpack.optimize.UglifyJsPlugin({
       compress: {
         warnings: false
@@ -96,65 +94,61 @@ var webpackConfig = merge(baseWebpackConfig, {
       name: 'manifest',
       chunks: ['vendor']
     }),
-    // 拷贝vendor.dll.js到构建目录
-    new CopyWebpackPlugin([
-            { from: 'src/vendor_*.dll.js', to: 'static/js/[name].[ext]' }
-    ]),     
     new PrerenderSpaPlugin(
-        path.join(__dirname, '../dist'),
-        ['/home'],
-        // (OPTIONAL) Options
+      path.join(__dirname, '../dist'),
+      ['/home'],
+      // (OPTIONAL) Options
       {
-            // NOTE: Unless you are relying on asynchronously rendered content,
-            // such as after an Ajax request, none of these options should be
-            // necessary. All synchronous scripts are already executed before
-            // capturing the page content.
+        // NOTE: Unless you are relying on asynchronously rendered content,
+        // such as after an Ajax request, none of these options should be
+        // necessary. All synchronous scripts are already executed before
+        // capturing the page content.
 
-            // Wait until a specific event is fired on the document.
+        // Wait until a specific event is fired on the document.
         captureAfterDocumentEvent: 'custom-post-render-event',
-            // This is how you would trigger this example event:
-            // document.dispatchEvent(new Event('custom-post-render-event'))
+        // This is how you would trigger this example event:
+        // document.dispatchEvent(new Event('custom-post-render-event'))
 
-            // Wait until a specific element is detected with
-            // document.querySelector.
+        // Wait until a specific element is detected with
+        // document.querySelector.
         captureAfterElementExists: '#content',
 
-            // Wait until a number of milliseconds has passed after scripts
-            // have been executed. It's important to note that this may
-            // produce unreliable results when relying on network
-            // communication or other operations with highly variable timing.
+        // Wait until a number of milliseconds has passed after scripts
+        // have been executed. It's important to note that this may
+        // produce unreliable results when relying on network
+        // communication or other operations with highly variable timing.
         captureAfterTime: 5000,
 
-            // NOTE: You can even combine strategies if you like. For example,
-            // if you only _sometimes_ want to wait for an event to fire, you
-            // can create a timeout by combining captureAfterTime with
-            // captureAfterDocumentEvent. When combining strategies, page
-            // content will be captured after the first triggered strategy.
+        // NOTE: You can even combine strategies if you like. For example,
+        // if you only _sometimes_ want to wait for an event to fire, you
+        // can create a timeout by combining captureAfterTime with
+        // captureAfterDocumentEvent. When combining strategies, page
+        // content will be captured after the first triggered strategy.
 
-            // Instead of loudly failing on JS errors (the default), ignore them.
+        // Instead of loudly failing on JS errors (the default), ignore them.
         ignoreJSErrors: true,
 
-            // Because PhantomJS occasionally runs into an intermittent issue,
-            // we will retry a page capture up to 10 times by default. You may
-            // raise or lower this limit if you wish.
+        // Because PhantomJS occasionally runs into an intermittent issue,
+        // we will retry a page capture up to 10 times by default. You may
+        // raise or lower this limit if you wish.
         maxAttempts: 10,
 
-            // Prevent PhantomJS from navigating away from the URL passed to it
-            // and prevent loading embedded iframes (e.g. Disqus and Soundcloud
-            // embeds), which are not ideal for SEO and may introduce JS errors.
+        // Prevent PhantomJS from navigating away from the URL passed to it
+        // and prevent loading embedded iframes (e.g. Disqus and Soundcloud
+        // embeds), which are not ideal for SEO and may introduce JS errors.
         navigationLocked: true,
 
-            // The options below expose configuration options for PhantomJS,
-            // for the rare case that you need special settings for specific
-            // systems or applications.
+        // The options below expose configuration options for PhantomJS,
+        // for the rare case that you need special settings for specific
+        // systems or applications.
 
-            // http://phantomjs.org/api/command-line.html#command-line-options
+        // http://phantomjs.org/api/command-line.html#command-line-options
         phantomOptions: '--disk-cache=true',
 
-            // http://phantomjs.org/api/webpage/property/settings.html
+        // http://phantomjs.org/api/webpage/property/settings.html
         phantomPageSettings: {
-              loadImages: true
-            }
+          loadImages: true
+        }
       }
     )
   ]

package.json

@@ -14,6 +14,7 @@
     "babel-polyfill": "^6.23.0",
     "element-ui": "^1.3.3",
     "prerender-spa-plugin": "^2.0.1",
+    "remove-webpack-plugin": "^1.2.2",
     "vee-validate": "^2.0.0-beta.22",
     "vue": "^2.3.3",
     "vue-axios": "^1.2.2",
@@ -67,4 +68,4 @@
     "node": ">= 4.0.0",
     "npm": ">= 3.0.0"
   }
-}
+}

src/service/api.js

@@ -59,7 +59,7 @@ import { Message } from 'element-ui'
       },
 
       topCarousel: function () {
-        return Vue.axios.get(`${API_ADDRESS2}/indexBanner1.json`, {
+        return Vue.axios.get(`${API_ADDRESS2}/indexBanner.json`, {
           apiName: '获取首页顶部banner'
         })
       },

src/service/filters.js

@@ -2,7 +2,7 @@
 import siteConfig from '../../config/site.config'
 
 // 日期转换成 xxxx年xx月xx日 12:12 格式
-export function dateTransform (val) {
+export function dateTransform(val) {
   var _date = new Date(val)
   var _year = _date.getFullYear(),
     _month = _date.getMonth() + 1,
@@ -12,15 +12,15 @@ export function dateTransform (val) {
   return _year + '年' + addZero(_month) + '月' + addZero(_day) + '日  ' + addZero(_hour) + ':' + addZero(_minute)
 }
 
-function addZero (target) {
+function addZero(target) {
   if (target < 10) {
     target = '0' + target
   }
   return target
 }
 
 // 获取所在地区时间
-export function localeDate (val, type, spe) {
+export function localeDate(val, type, spe) {
   var _date = new Date(val)
   if (type === 'date') {
     return _date.toLocaleDateString()
@@ -30,26 +30,54 @@ export function localeDate (val, type, spe) {
 }
 
 // 截取字符串
-export function subStr (val, length, addEllipsis = true) {
+export function subStr(val, length, addEllipsis = true) {
   var endStr,
     strLength,
     notChineseStrLength,
-    excludeStrLength
-  if (val) {
-                // 计算非中文字符长度
-    notChineseStrLength = val.split(/[\x00-\xff]/).length - 1
-                // 排除@%<>等显示宽度和中文差不多的字符
-    excludeStrLength = val.split(/[@%<>]/).length - 1
-    strLength = val.length - notChineseStrLength + Math.round((notChineseStrLength - excludeStrLength) / 2)
+    excludeStrLength,
+    newStr = ''
 
+  if (val) {
+    sliceStr(val, length)
+    strLength = val.length - notZhStringLength(val) + Math.round((notZhStringLength(val) - excludeStringLength(val)) / 2)
     addEllipsis && strLength > length ? endStr = '...' : endStr = ''
-    return val.substr(0, length) + endStr
+    return newStr + endStr
   } else {
     return ''
   }
+
+  // 截取函数
+  function sliceStr(val, length) {
+    var addStr
+    addStr = val.substr(0, length)
+    newStr = newStr + addStr
+    // 计算非中文字符长度
+    notChineseStrLength = notZhStringLength(addStr)
+    var newLength = addStr.length - notChineseStrLength
+    if (notChineseStrLength > 0) {
+      // 排除@%<>等显示宽度和中文差不多的字符
+      excludeStrLength = excludeStringLength(addStr)
+      // 非中文字符2个算一个长度
+      var notChineseLength = parseInt((notChineseStrLength - excludeStrLength) / 2)
+      // 重新计算后得出截取的字符串的长度
+      newLength = newLength + notChineseLength + excludeStrLength
+      // 递归调用，再去截取更多字符来补充字符串长度
+      sliceStr(val.substr(length), length - newLength)
+    }
+  }
+
+}
+
+// 获取非中文字符长度
+function notZhStringLength(val) {
+  return val.split(/[\x00-\xff]/).length - 1
+}
+// 获取非中文字符长度
+function excludeStringLength(val) {
+  return val.split(/[@&#~%<>W]/).length - 1
 }
 
 // 图片cdn
-export function imgCdn (val) {
+export function imgCdn(val) {
   return siteConfig.address.IMG_ADDRESS + val
 }