vue项目打包问题汇总(vue-cli2.0)

一、打包后打开页面一片空白
原因一：dist目录中文件引用路径不对
解决方法：
将config > index.js 中 build模块的 assetsPublicPath路径设置为 ‘./’

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',

    // ...
  }

原因二：路由设置成了history模式
解决方法：
去掉history模式或在服务端加一个覆盖所有的情况的候选资源，详见HTML5 History模式

export default new Router({
  //mode: 'history',
  routes: routes
})

二、打包后背景图片丢失
在build > webpack.base.conf.js 中 给图片模块添加共用路径：publicPath: ‘…/…/’

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