vue-cli 的压缩图片

1.npm  install -g vue-cli;
安装成功：用vue-V;检测；
2.vue  init  webpack-simple  myproject;//一般的中小项目用webpack-simple就可以了；myproject 是我工程的名字；大型项目就用webpack
3.cd myproject;
4.npm install;
5.npm run dev;
6.下载vue-router;vue-resource;--save;
小知识：
--save-dev：添加到package.json里的devDependencies;表示的开发依赖；
--save 是将信息添加到package.json里面的dependencies,表示的是发布依赖；

vue-cli 最后压缩所有的代码 的终极代码；
var path = require('path')
var webpack = require('webpack');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: './dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      },      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
     /* {
        test: /\.(png|jpg|gif|svg)$/,
         loader: 'file-loader',
         options: {
           name: '[name].[ext]?[hash]',
           outputPath:'images/'
        }
      },*/
      {// 对图片资源文件使用url-loader
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'url-loader',
        options: {
          limit: 1000000000,
          name: '[name].[ext]?[hash]',
          outputPath:'images/'
        }
        //options: {
        //  // 小于10K的图片转成base64编码的dataURL字符串写到代码中
        //  limit: 10000,
        //
        //  // 其他的图片转移到静态资源文件夹
        // /* name: utils.assetsPath('img/[name].[hash:7].[ext]')*/
        //}
      },
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
};

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

1. 在src文件里面新建一个static文件，/iamges/logo.png;
   在xx.vue里面写代码，就写这个图片的路径；
   2.确保把所有的代码都修改完毕之后，
   3.publicPath: ‘./dist/’, //就在/dist前面加一个”.”；webpack配置文件里面 这是属于输出文件的设置；

4. options: {
           name: '[name].[ext]?[hash]',
           outputPath:'images/'
        }

5.在index.html 最后引入的bould.js前面加一个“.”;
6.最后 npm run build;