vue项目用vue-cli3搭建项目目录打包后报错怎么办-群英

上一篇：利用vue实现元素可拖拽效果代码是什么下一篇：TypeScript只读函数参数、类属性、索引是怎样的

在实际应用中，我们有时候会遇到“vue项目用vue-cli3搭建项目目录打包后报错怎么办”这样的问题，我们该怎样来处理呢？下文给大家介绍了解决方法，希望这篇“vue项目用vue-cli3搭建项目目录打包后报错怎么办”文章能帮助大家解决问题。

最近开发一个web端vue项目时使用了vue-cli3.0搭建项目目录，开发过程中一切顺利，没有遇到什么问题，开发完毕打包上线时出现了问题，打包后的文件默认在dist目录下，打开index.html时发现不能运行，报错如下：

现在有两个问题

网上查询一番，发现大家都说修改config/index.js文件的配置。问题是该项目是用cli3.0搭建的，压根就没有config文件夹···

经过查询，原来3.0搭建的项目已经取消了config文件夹，所有配置都是在最外层的vue.config.js文件中进行配置，如下图：

修改文件名，只需要设置其中的outputDir选项即可：

module.exports = {
	outputDir:"myProject" //打包后的项目目录名称
}

报错问题网上很多都是在config/index.js修改build的路径，而vue-cli3.0的vue.config.js不能直接写build对象，另一种说法是修改其中的baseUrl，当你运行时会提示baseUrl已经废弃，请用publicPath代替。

找到问题了就简单了，直接修改publicPath即可：

module.exports = {
	publicPath:"./"  //基础路径
}

再次npm run build ,生成了自己想要的文件目录名称，其中的index.html也能够正常打开；

vue文件夹名称修改导致错误

一般这种情况是你把原来的文件夹名称修改了，所以重新改回来就可以了

现在大家对于vue项目用vue-cli3搭建项目目录打包后报错怎么办的内容应该都有一定的认识了吧，希望这篇能对大家有所帮助。最后，想要了解更多，欢迎关注群英网络，群英网络将为大家推送更多相关的文章。

标签： vue

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：利用vue实现元素可拖拽效果代码是什么下一篇：TypeScript只读函数参数、类属性、索引是怎样的