解决vue-cli2和vue-cli3项目分别打包后dist文件中index.html出现空白

HELLO_小仙女~

于 2020-07-08 11:18:06 发布

阅读量2.4k

点赞数 1

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_45851208/article/details/107200398

版权

当vue项目在npm run build后，dist中的index.html显示空白，通常是由于路径配置错误导致。针对vue-cli2，需在config/index.js中将assetPublicPath改为'./'。而在vue-cli3中，由于没有config文件，需创建vue.config.js，使用baseUrl（3.2.0之前版本）或publicPath（3.2.0及以后版本）设置路径为'./'。如果路由模式为history，需改为hash模式，或配合服务器配置以解决找不到文件的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue开发项目是不是遇到过在vue项目在开发环境下一切正常，但在npm run build之后，打开dist文件中的index.html页面却是一片空白，打开控制台发现报错：Failed to load resource: net::ERR_FILE_NOT_FOUND

出现这个问题的话，需要查看自己使用的是vue-cli2还是vue-cli3，他们处理方式不一样。

一.vue-cli2处理方式：

项目中找到config/index.js文件，将assetPublicPath的路径改为“./”即可。

二.vue-cli3处理方式：

vue-cli3相比vue-cli2配置简单了很多，没有了其他配置文件，所以需要在根目录自己创建vue.config.js。在配置vue.config.js中这里有个问题需要注意，vue-cli 3.2.0之前的版本请使用baseUrl来设置路径，不要使用publicPath，否则会报错（[VUE ERROR] Invalid options in vue.config.js: "publicPath" is not allowed）。因为publicPath 属性到 vue-cli 3.2.0 之后才支持。

下面说下vue-cli3的配置问题。

我的vue-cli3版