修改webpack配置文件

找到你的webpack的配置文件：admin/config/index.js

找到配置项：assetsPublicPath

修改为：assetsPublicPath: './'

修改完这个配置项后打包出来的dist文件夹下的index.html就可以直接本地使用浏览器打开正常渲染，不会出现空白页的现象。

修复element-ui图标无法正常显示

webpack 3 (ExtractTextPlugin)

admin/build/utils.js目录下找到如下代码：

    // 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'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

图片：

修改为：

    // 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: '../../'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

图片：

webpack 4 (MiniCssExtractPlugin)

因为之前ExtractTextPlugin在webpack4中会存在问题，所以基本使用MiniCssExtractPlugin，所要修改的配置项也就和webpack 3的不一样

admin/build/webpack.base.conf.js找到如下代码：

      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }

图片：

修改为：

      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]'),
          publicPath: '../../'
        }
      }

图片：

做完以上修改，然后重新npm run build（打包命令）就可以得到可以正常本地打开使用的index.html文件