vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
更新时间：2022年04月06日 16:23:26 作者：小码Climber
这篇文章主要介绍了vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
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文件夹名称修改导致错误
一般这种情况是你把原来的文件夹名称修改了，所以重新改回来就可以了
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了vue+echart实现双柱状图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
下面小编就为大家带来一篇浅谈mint-ui loadmore组件注意的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
Babel是一个JS编译器,主要作用是将ECMAScript2015+ 版本的代码,转换为向后兼容的JS语法,以便能够运行在当前和旧版本的浏览器或其它环境中,下面这篇文章主要给大家介绍了关于Vue中babel.config.js配置详解的相关资料,需要的朋友可以参考下2023-02-02
这篇文章主要为大家详细介绍了Vue.js结合bootstrap前端实现分页和排序效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
Vue Router 是 Vue 的官方路由,它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举,下面就跟随小编一起学习一下vue-router的具体用法吧2023-12-12
这篇文章主要介绍了详解Vue单元测试case写法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
本文以校验两次密码的一致性应用，给出两个可变属性值的字段之间的联合校验的典型解决方案，通过实例代码给大家介绍Vue 两个字段联合校验之修改密码功能的实现，需要的朋友一起看看吧2021-07-07
这篇文章主要介绍了vue使用计算属性完成动态滑竿条制作，文章围绕计vue算属制作动态滑竿条的相关代码完成内容,需要的朋友可以参考一下2021-12-12
文章介绍了Vue项目部署步骤以及404错误的解决方案,部署步骤包括构建项目、上传文件、配置Web服务器、重启Nginx和访问域名,404错误通常是由于历史模式问题导致的,解决方法是修改Nginx配置,将所有页面请求重定向到index.html,并在Vue应用中覆盖所有路由情况2025-02-02
这篇文章主要为大家详细介绍了vue实现表格过滤功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
最新评论