Vue项目运行npm run build后会生成一个dist文件夹，我们一般都是把这个文件夹部署到服务器上。dist文件夹里边有一个static文件和一个index.html页面，这个index就是最后单页面的最终文件。

有时候直接打包后，打开index.html，一片空白。 具体出现的问题，如下：

1.没有找到资源，资源路径错误

 解决办法有两种： 

（1）修改config/index.html中build中的assetsPublicPath，改为当前目录（./），而不是根目录（/）;

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

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

    /**
     * Source Maps
     */

(2).修改build/webpack.base.conf.js中的publicPath，在build/webpack.prod.conf.js添加publicPath

build/webpack.base.conf.js

output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? './' + config.build.assetsPublicPath
      : './' + config.dev.assetsPublicPath
  },

build/webpack.prod.conf.js

const webpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: true,
      usePostCSS: true
    })
  },
  devtool: config.build.productionSourceMap ? config.build.devtool : false,
  output: {
    publicPath: './',     //添加的一行
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },

2.页面可以打开，但是页面上的一些图片请求失败

解决办法：

在build/utils.js中，如下位置，添加 publicPath: '../../'

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../'
      })
    }

3、页面可以正常打开，如果vue-router跳转路由页面无法显示

解决方法：打开index.js看路由配置，mode:' hash ' 改这个配置即可，如图：

 参考链接：https://blog.csdn.net/for_weber/article/details/80414754