vue编译后的路径问题（包括传CDN）

本地项目代码：

<img :src="require('@/assets/images/xxx.png')">
<div :style="{backgroundImage:'url('+require('@/assets/images/xxx.png')+')'}">

编译之前的配置：

1.config/index.js

将assetsPublicPath改为'./' (约46行)

该配置文件下的其他字段含义：

    //打包后文件要存放的路径
    assetsRoot: path.resolve(__dirname, '../dist'),
    //打包后除了index.html之外的静态资源要存放的路径
    assetsSubDirectory: 'static',
    //打包后，index.html里面引用资源的相对地址
    // assetsPublicPath: '/',
    assetsPublicPath: './',

2.build/webpack.prod.conf.js

在output下新增publicPath:'./' (约29行)

如果需要将静态资源放到CND上，则需要将publicPath改为相应的域名，例如：

publicPath:'http://testactjp.papasg.com/fe/s6/'

3.build/utils.js

publicPath: '../../'（约51行）

具体位置如下

 if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../' //新增
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

4.build/webpack.base.conf.js

如不想图片走Base 64模式,可以将options下面的limit改为1（意思是小于1的资源会被编译成Base 64,但是改为0不行，这样打包后的文件夹里面就不包含img文件夹了）
具体位置：（约44行）

    {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 1,//默认为10000(10kb)
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
          // name: utils.assetsPath('img/[name].[ext]')
        }
      },

在以上代码中，如果将name改为已注释掉的这一行，编译后的图片名字依旧还是自己命名的样子，坏处是每次更换图片都需要收到加版本号，即使用hash:7的模式自动加了版本号，也不影响本地开发，因为本地开发的时候，图片路径同样自动用同样的方式加了版本号。

注：
1.打包后，dist/static文件夹下面的img文件夹里面不在包含文件夹了，所以开发的时候assets/images文件夹下面最好不要再包含文件夹了，如果必要情况下需要添加文件夹，需要保证文件夹下的文件不重名，否则会被覆盖。
2.npm起的服务如果将路由的mode由默认的hash改为history,打包后放到测试环境组件会加载不出来