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使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
vue3.0实现插件封装
Dec 14 Vue.js
Vue 组件注册全解析
Dec 17 Vue.js
Vue中computed和watch有哪些区别
Dec 19 Vue.js
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 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中VC6、VC9、TS、NTS版本的区别与用法详解
2013/10/26 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
thinkphp5框架前后端分离项目实现分页功能的方法分析
2019/10/08 PHP
Laravel Eloquent ORM 多条件查询的例子
2019/10/10 PHP
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
javaScript 利用闭包模拟对象的私有属性
2011/12/29 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
javascript学习笔记(十二) RegExp类型介绍
2012/06/20 Javascript
ie下jquery.getJSON的缓存问题的处理方法
2013/03/29 Javascript
js的回调函数详解
2015/01/05 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
学习javascript面向对象 理解javascript对象
2016/01/04 Javascript
EasyUI加载完Html内容样式渲染完成后显示
2016/07/25 Javascript
JS实现的DIV块来回滚动效果示例
2017/02/07 Javascript
jQuery获取随机颜色的实例代码
2018/05/21 jQuery
vue中使用heatmapjs的示例代码(结合百度地图)
2018/09/05 Javascript
javascript使用链接跨域下载图片
2019/11/01 Javascript
原生js实现日历效果
2020/03/02 Javascript
Python字符编码判断方法分析
2016/07/01 Python
Python numpy实现二维数组和一维数组拼接的方法
2018/06/05 Python
Python安装tar.gz格式文件方法详解
2020/01/19 Python
pytorch实现MNIST手写体识别
2020/02/14 Python
后端开发使用pycharm的技巧(推荐)
2020/03/27 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
Linux管理员面试题 Linux admin interview questions
2016/07/08 面试题
承办会议欢迎词
2014/01/17 职场文书
求职信模板怎么做
2014/01/26 职场文书
幼儿园消防安全制度
2014/01/26 职场文书
八年级美术教学反思
2014/02/02 职场文书
优秀大学生自荐信
2014/06/09 职场文书
教师批评与自我批评发言稿
2014/10/15 职场文书
市场总监岗位职责
2015/02/11 职场文书
人民的好儿女观后感
2015/06/18 职场文书
个人催款函范文
2015/06/23 职场文书
导游词之湖北武当山
2019/09/23 职场文书
JavaWeb 入门篇(3)ServletContext 详解 具体应用
2021/07/16 Java/Android