vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决


Posted in Vue.js onApril 06, 2022

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

问题描述

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

vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决

现在有两个问题

  • 我想修改打包后的文件夹名称;
  • 上述报错问题的解决;

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

修改文件名

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

vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决

修改文件名,只需要设置其中的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-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决

以上为个人经验,希望能给大家一个参考,也希望大家多多支持三水点靠木。 

Vue.js 相关文章推荐
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 Vue.js
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
vue实现验证用户名是否可用
Jan 20 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 Vue.js
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 Vue.js
vue cli4中mockjs在dev环境和build环境的配置详情
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 #Vue.js
vue3使用vuedraggable实现拖拽功能
vue整合百度地图显示指定地点信息
vue中使用mockjs配置和使用方式
VUE使用draggable实现组件拖拽
Apr 06 #Vue.js
教你部署vue项目到docker
You might like
php通过Chianz.com获取IP地址与地区的方法
2015/01/14 PHP
将PHP程序中返回的JSON格式数据用gzip压缩输出的方法
2016/03/03 PHP
Yii2搭建后台并实现rbac权限控制完整实例教程
2016/04/28 PHP
php array_merge_recursive 数组合并
2016/10/26 PHP
Gambit vs CL BO3 第一场 2.13
2021/03/10 DOTA
如果文字过长,则将过长的部分变成省略号显示
2006/06/26 Javascript
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
2014/05/23 Javascript
JavaScript常用小技巧小结
2014/12/29 Javascript
JavaScript获取数组最小值和最大值的方法
2015/06/09 Javascript
基于JS代码实现导航条弹出式悬浮菜单
2016/06/17 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
2016/10/05 Javascript
js禁止浏览器页面后退功能的实例(推荐)
2017/09/01 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
2019/04/04 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
python检查序列seq是否含有aset中项的方法
2015/06/30 Python
实例探究Python以并发方式编写高性能端口扫描器的方法
2016/06/14 Python
浅谈对yield的初步理解
2017/05/29 Python
解决Python运行文件出现out of memory框的问题
2018/12/03 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
python使用协程实现并发操作的方法详解
2019/12/27 Python
django ajax发送post请求的两种方法
2020/01/05 Python
使用Python将语音转换为文本的方法
2020/08/10 Python
Python Django路径配置实现过程解析
2020/11/05 Python
银行个人求职自荐信范文
2013/12/16 职场文书
贷款委托书范本
2014/04/08 职场文书
平面设计师岗位职责
2014/09/18 职场文书
公司周年庆典标语
2014/10/07 职场文书
中班下学期个人工作总结
2015/02/12 职场文书
教师辞职书范文
2015/02/26 职场文书
党支部培养考察意见
2015/06/02 职场文书
python图像处理基本操作总结(PIL库、Matplotlib及Numpy)
2021/06/08 Python
angular异步验证器防抖实例详解
2022/03/31 Javascript
Docker下安装Oracle19c
2022/04/13 Servers