以下是用vue-cli@2.0构建的后台管理系统中总结出来的打包注意事项

1，运行已有发布环境打包命令 npm  run  build 以后，的dist文件夹放到本地部署的tomcat中运行，找不到文件

      原因是，官方配置文件 config/index.js中配置的 ‘assetsPublicPath‘属性（即打包时，output的文件路径），将build中的assetsPublicPath改成‘./’；

     注意，dev中的assetsPublicPath不要改，否则 npm  run  dev会报错

2，vue-cli默认开启eslint检查语法，比较严格

     关闭方法：1》 config/index.js   dev对象中，把useEslint的值改为false；

                          2》文件头部加一个 /*eslint-disable*/

*******************************************************************分割线***********************************************************************

打包优化

3, 打包速度优化

默认production环境是开启sourceMap的，打包速度会比较慢，可以在config/index.js 的build对象中，把productionSourceMap属性改为false，这样打包出来的文件中不会有map文件，打包速度会提升

4，在build/webpack.base.config.js里配置resolve.modules属性，配置模块库（即 node_modules）所在的位置，加快打包速度

module.exports = {
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    modules: [
      resolve('src'),
      resolve('node_modules')
    ],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },

5，loader中配置include和exclude，减少不必要的遍历

include 包括路径，

exclude，排除路径

{
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')],
        exclude: /node_modules/
},

6，默认使用uglifyjs-webpack-plugin来压缩文件，但是是单线程压缩，速度很慢，可以改用 webpack-parallel-uglify-plugin 插件，它可以并行运行 UglifyJS 插件，从而更加充分、合理的使用 CPU 资源，从而大大减少构建时间

1》npm i webpack-parallel-uglify-plugin -save-dev

2》build/webpack.prod.conf.js 文件

如果报错，可能是版本问题，安装一个低一点的版本

//默认配置
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    }),

//改成如下

const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');

new ParallelUglifyPlugin({
      cacheDir: '.cache/',
      uglifyJS:{
        output: {
          comments: false
        },
        compress: {
          warnings: false
        }
      }
    }),

7，用happypack加速代码构建

运行在 Node.js 之上的 Webpack 是单线程模型的，而 HappyPack 的处理思路是：将原有的 webpack 对 loader 的执行过程，从单一进程的形式扩展多进程模式，从而加速代码构建

1》npm i happypack

2》 build/webpack.base.conf.js中，修改为

const HappyPack = require('happypack');
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        //把对.js 的文件处理交给id为happyBabel 的HappyPack 的实例执行
        loader: 'happypack/loader?id=happyBabel',
        include: [resolve('src')],
        //排除node_modules 目录下的文件
        exclude: /node_modules/
      },
    ]
  },
  plugins: [
    new HappyPack({
        //用id来标识 happypack处理那里类文件
      id: 'happyBabel',
      //如何处理  用法和loader 的配置一样
      loaders: [{
        loader: 'babel-loader?cacheDirectory=true',
      }],
      //共享进程池
      threadPool: happyThreadPool,
      //允许 HappyPack 输出日志
      verbose: true,
    })
  ]
}

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

8，打包后文件大小

可以把一些不经常变化的文件在index.html文件中用script标签引入，而不是在main.js中用import引入（前者不会被打包到app或者vendor文件中，这样这几个文件大小不会太大），引入后，需要在build/webpack.base.config.js中加入以下配置，告知webpack这些文件不需要打包，例如 axios、element-ui，echarts、g2等插件

externals:{

    'axios': 'axios',

    'Vue': 'Vue',
    'element-ui': 'ELEMENT',

    'G2':'G2',

    'DataSet': 'DataSet'

  }

9，引入UI框架

为防止引入UI框架后，打包文件过大，可采取两种方法（以element-ui为例）：

1》按需引入，按照官网文档操作即可

import { Button, Select } from 'element-ui';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

 

注意：按需引入需要在babel里设置plugins,添加component项  同时需要安装npm install babel-plugin-component -save-dev

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

2》在index.html中用script标签引入

详细步骤，1）index.html引入index.css 和 index.js 文件

                     2）main.js中去掉按需引入或者全部引入的element-ui语句

                     3） build/webpack.base.config.js中配置externals属性，添加‘element-ui’： ‘ELEMENT’，操作类似方法4

                     4）main.js中加 Vue.use(ELEMENT,{size: 'small', zIndex: 1000})

         

10，抽离出css等样式文件，

安装 npm install extract-text-webpack-plugin -save-dev

在module里面添加loader，同时在plugins中添加以下代码，在一个环境中，两者必须同时配置，否者会报错

{
				test: /\.(scss|sass)$/,
				use: ExtractTextPlugin.extract({
				  use: ['css-loader', 'sass-loader'],
				  fallback: 'style-loader'
				})
			  // loader: 'style-loader!css-loader!sass-loader'
			},

new ExtractTextPlugin({
		  filename: utils.assetsPath('css/[name].[contenthash].css'),
		  
		  allChunks: true,
		}),

11，打包压缩文件 

该配置需要服务器同步支持读取gzip格式文件

前端配置如下：

1》config/index.js 中 productionGzip: true, 如果是false，则改为true

2》npm install --save-dev compression-webpack-plugin

12，路由懒加载

当页面过多时，需要在路由配置文件中，配置成路由懒加载

{
    path:'',
    name:'',
    component: resolve => require(['@/views/partner/PartnerListView.vue'],resolve)}
}

或者

{
    path: '',
    name:'',
    component: resolve => {
        require.ensure(['./home.vue'], () => {
            resolve(require('./home.vue'))
        })
    }
}