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 18 Vue.js
Vue实现点击当前行变色
Dec 14 Vue.js
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
Vue实现小购物车功能
Dec 21 Vue.js
vue实现验证用户名是否可用
Jan 20 Vue.js
vue-video-player 断点续播的实现
Feb 01 Vue.js
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
vue ant design 封装弹窗表单的使用
Jun 01 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中require和include路径问题详解
2014/12/25 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
jQuery中jqGrid分页实现代码
2011/11/04 Javascript
javascript获取flash版本号的方法
2014/11/20 Javascript
jquery中map函数遍历数组用法实例
2015/05/18 Javascript
js判断子窗体是否关闭的方法
2015/08/11 Javascript
js实现兼容IE、Firefox的图片缩放代码
2015/12/08 Javascript
JS遍历数组及打印数组实例分析
2016/01/21 Javascript
BootStrap整体框架之基础布局组件
2016/12/15 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
angular forEach方法遍历源码解读
2017/01/25 Javascript
老生常谈JavaScript面向对象基础与this指向问题
2017/10/16 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
2018/01/09 Javascript
Vue实现滑动拼图验证码功能
2019/09/15 Javascript
Vue中实现回车键切换焦点的方法
2020/02/19 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
2020/12/30 Vue.js
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
在python的WEB框架Flask中使用多个配置文件的解决方法
2014/04/18 Python
pandas dataframe添加表格框线输出的方法
2019/02/08 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
python如何更新包
2020/06/11 Python
什么是python的函数体
2020/06/19 Python
怎么快速自学python
2020/06/22 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
matplotlib事件处理基础(事件绑定、事件属性)
2021/02/03 Python
纽约市的奢华内衣目的地:Anya Lust
2019/08/02 全球购物
美国和加拿大计算机和电子产品购物网站:TigerDirect.com
2019/09/13 全球购物
养殖行业的创业计划书
2014/01/05 职场文书
优秀少先队工作者事迹材料
2014/05/13 职场文书
我的中国梦演讲稿800字
2014/08/19 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书
千与千寻观后感
2015/06/04 职场文书
2015年国庆节广播稿
2015/08/19 职场文书
心理学培训心得体会
2016/01/22 职场文书
Java中的随机数Random
2022/03/17 Java/Android
Python中的matplotlib绘制百分比堆叠柱状图,并为每一个类别设置不同的填充图案
2022/04/20 Python