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

K先生 2020-06-04 爱技术6222

最近使用做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命令重新打包，应该就能正常打开了。