vue history模式下，打包后，出现空白页情况

修改config/index.js下的build中的assetsPublicPath: '/' 为 assetsPublicPath: './',
build: {
  // Template for index.html
  index: path.resolve(__dirname, '../dist/index.html'),

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

  /**
   * Source Maps
   */

  productionSourceMap: true,
  // https://webpack.js.org/configuration/devtool/#production
  devtool: '#source-map',

  // Gzip off by default as many popular static hosts such as
  // Surge or Netlify already gzip all static assets for you.
  // Before setting to `true`, make sure to:
  // npm install --save-dev compression-webpack-plugin
  productionGzip: false,
  productionGzipExtensions: ['js', 'css'],

  // Run the build command with an extra argument to
  // View the bundle analyzer report after build finishes:
  // `npm run build --report`
  // Set to `true` or `false` to always turn it on or off
  bundleAnalyzerReport: process.env.npm_config_report
}

　  vue搭建的项目，路由一直用的hash模式，所以url中都会带有一个“#”号。现在想要去掉“#”，于是使用history模式 { mode: 'history' }，
mode: 'history'，使用这个模式，在开发阶段一切都是正常的，访问地址是localhost:8888，以上没什么错误，一切都好用。url里也没有#了。可是打包之后，访问项目会发现页面一片空白的情况。不是404，不报错，只是空白！！

解决办法如下：

　　　此时只需要修改router中的index.js，给路由中加一个base的属性，值为 ‘/Main/’就可以了。如下代码：

export default new Router({
  mode: 'history',
  base: '/Main/',
  routes: [
    {
      path: '/',
      name: 'Main',
      component: Main
    }
  ]
})

 

　　记住这个base，base值两边一定要有"/" ，如： '/Main/'

 

    　其次，这个文件夹是服务器放项目的文件夹，不是你本地项目的文件夹位置！！