• vue-cli3.0修改打包后的文件地址和文件名

问题描述

最近开发一个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文件夹名称修改导致错误

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

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

猜你喜欢

• JS逻辑运算符包括几种，特点是什么

  JavaScript中有三个逻辑运算符，&&与、||或、!非，虽然他们被称为逻辑运算符，但这些运算符却可以被应用于任意类型的值而不仅仅是布尔值，他们的结果也同样可以是任意类型。

• Nest.js连接MongoDB的具体操作是什么

  node中怎么使用Nest.js 连接 MongoDB 数据库？下面本篇文章给大家介绍一下node 框架 Nest.js 使用 MongoDB 的方法，希望对大家有所帮助！

• JS的Number类型常见错误有哪些，怎样解决的？

  本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于number类型的相关知识，包括了number类型的常见误区背后原理以及解决方法等内容，下面一起来看一下，希望对大家有帮助。

• JavaScript浅拷贝的简单理解是什么，怎么实现

  简单复制对象的最外层属性，不处理对象更深层次的对象属性，会导致复制对象和原始对象的深层次属性指向同一个内存。如果一个对象改变了内存的地址，就会影响另一个对象。

• JavaScript编译原理怎样理解，包括哪些内容

  本篇文章给大家带来了关于javascript的相关知识，其中主要整理了编译原理的相关问题，Javascript是一种由Netscape(网景)的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，下面一起来看一下，希望对大家有帮助。