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

如何解决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

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

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

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

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 解决vue2.0 打包之后 打开index.html出现空白页问题

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们