解决vue2.0 打包之后 打开index.html出现空白页问题

如何解决 vue2.0 打包之后 打开 index.html 出现空白页.

1. 打包之前修改三个文件

第一步，找到 build 文件，在 webpack.prod.conf.js 第 25 行左右 有一个对象为 output，在这里面增加一行代码：

publicPath:'./'
  output: {
    //在这里加一行代码  
    publicPath:'./',
 
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },

第二步，找到 utils.js，在 第 47 行左右 有一个 if 判断为 if (options.extract)，在这里面增加一行代码：

注意：这个是保证 加载背景图片等 css 样式资源不出现 路径问题

publicPath:'../../'
    if (options.extract) {
      return ExtractTextPlugin.extract({
        publicPath:'../../',
        use: loaders,
        fallback: 'vue-style-loader'
      })
    }

第三步，找到 config/index.js 第 46 行左右，修改 assetsPublicPath 路径为 ‘./’;

2.然后你就可以 build 了。

3.如果 build 完成后 在本地还是空白页 或者说 放到服务器上面 是空白页 怎么办？

使用 http-server 服务器的方式进行启动：
基于 Node.js 轻量级 HTTP 服务器有很多种，我们将以http-server为例。

npm install http-server -g 工具安装好之后，我们只要运行命令就能启动一个 http 服务啦，具体启动命令请参考官方文档。

http-server [path] [options] 启动日志如下：

命令为：http-server （在浏览器中访问以下三个地址中的任意一个，就能看到 src 目录下的 index.html 咯，案例是在 src 目录下启动的服务）

命令为：http-server src (若命令行工具在 “ \响应式 ” 文件夹中打开，要想达到上述效果，运行命令时需要带上 [path] 参数 )

[options] 参数可以指定端口、地址等等，例如指定服务在 8888 端口启动，命令为：http-server src -p 8888

和我们的项目结合起来就是：

• 我们先按照上面的方式三步修改我们的配置文件。
• 我们使用npm run build生成 dist 文件夹。
• 安装npm install -g http-server切换到我们的 dist 目录，执行http-server-p 9090,在浏览器中访问我们的服务即可。

以上关于解决vue2.0 打包之后 打开index.html出现空白页问题的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。