解决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出现空白页问题