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+vant实现购物车全选和反选功能
Nov 17 Vue.js
详解vue实现坐标拾取器功能示例
Nov 18 Vue.js
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
Vue组件生命周期运行原理解析
Nov 25 Vue.js
对vue生命周期的深入理解
Dec 03 Vue.js
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
vue实现树状表格效果
Dec 29 Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
Vue Element plus使用方法梳理
Dec 24 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执行sql语句的写法
2009/03/10 PHP
php启动时候提示PHP startup的解决方法
2013/05/07 PHP
探讨file_get_contents与curl效率及稳定性的分析
2013/06/06 PHP
比较详细的关于javascript 解析json的代码
2009/12/16 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
js调用css属性写法
2013/09/21 Javascript
javascript获取form里的表单元素的示例代码
2014/02/14 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
JS实现的仿淘宝交易倒计时效果
2015/11/27 Javascript
node.js实现端口转发
2016/04/14 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
knockoutjs模板实现树形结构列表
2017/07/31 Javascript
手机注册发送验证码倒计时的简单实例
2017/11/15 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
浅谈一种让小程序支持JSX语法的新思路
2019/06/16 Javascript
微信小程序 冒泡事件原理解析
2019/09/27 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
2019/11/04 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
2020/01/21 Javascript
[44:37]完美世界DOTA2联赛PWL S3 Forest vs access 第一场 12.11
2020/12/13 DOTA
python实现划词翻译
2020/04/23 Python
python中函数传参详解
2016/07/03 Python
基于Python实现的ID3决策树功能示例
2018/01/02 Python
Python3中的json模块使用详解
2018/05/05 Python
Python实现调用另一个路径下py文件中的函数方法总结
2018/06/07 Python
python爬虫实例详解
2018/06/19 Python
Python实现注册、登录小程序功能
2018/09/21 Python
Python中format()格式输出全解
2019/04/12 Python
在django view中给form传入参数的例子
2019/07/19 Python
Django用内置方法实现简单搜索功能的方法
2020/12/18 Python
韩国休闲女装品牌网站:ANAIS
2016/08/24 全球购物
惠普新加坡官方商店:HP Singapore
2020/04/17 全球购物
编写函数,将一个3*3矩阵转置
2013/10/09 面试题
机电专业体育教师求职信
2013/09/21 职场文书
2014年置业顾问工作总结
2014/11/17 职场文书
学校清洁工岗位职责
2015/04/15 职场文书