K先生个人博客

当前位置:首页 > 爱技术 > 正文

vue-cli4打包成dist后打开空白的最新解决办法

最近使用做vue项目的时候,使用npm run build命令对项目进行打包的时候出现了问题,打包生成dist目录后,打开里面的index.html文件,发现竟然是空白!问题就是这样的,下面说一下博主打包时的环境是怎样的。

问题产生的环境

vue-cli的版本为4.4.1,使用vue -V 或者vue --version命令可查看

vue的版本是2.6.11 使用npm list vue命令可查看(需要cd进入到项目目录)

ps:应该有很多人以为使用vue -V 命令查出来的就是vue的版本,其实查出来的是vue-cli的版本,博主也是被骗了好久,这个问题使用谷歌和百度会得出来不一样的答案,谷歌果然是谷歌!

解决vue-cli4打包成dist后打开空白的问题

问题环境了解了,那么就来看一下解决方法吧。如果你百度过这个问题,那么你就会发现,百度出来的都是说修改config/index.js文件,但你会发现你的vue项目中并没有这个文件或目录,,,

不能说别人的答案不对,只能说过时了。现在使用vue-cli4搭建的vue项目,是没有config文件夹的,所以最新的解决办法应该是这样的:

在项目根目录创建vue.config.js文件,记得是根目录,内容为:

module.exports = {
 publicPath: process.env.NODE_ENV === 'production'
    ? './'
    : '/'
}

如果不出意外的话,你重新运行npm run build命令重新打包,应该就能正常打开了。

作者K先生本文地址http://www.gold404.cn/info/74

版权声明:本文为原创文章,版权归 K先生个人博客 所有,欢迎分享本文,转载请保留出处,谢谢!

文章评论

* 必填
可选
可选

评论列表