解决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
,在浏览器中访问我们的服务即可。
声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » 解决vue2.0 打包之后 打开index.html出现空白页问题
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » 解决vue2.0 打包之后 打开index.html出现空白页问题