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 10 Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
vue编写简单的购物车功能
Jan 08 Vue.js
详解实现vue的数据响应式原理
Jan 20 Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
Vue3.0 手写放大镜效果
Jul 25 Vue.js
如何优化vue打包文件过大
Apr 13 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 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
GD输出汉字的函数的分析
2006/10/09 PHP
不重新编译PHP为php增加openssl模块的方法
2011/06/14 PHP
从手册去理解分析PHP session机制
2011/07/17 PHP
简单的php新闻发布系统教程
2014/05/09 PHP
php简单防盗链实现方法
2015/07/29 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
PHP多维数组元素操作类的方法
2016/11/14 PHP
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
2010/08/13 Javascript
extjs之去除s.gif的影响
2010/12/25 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
2013/04/22 Javascript
JQuery下拉框应用示例介绍
2014/04/23 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
javascript图片预加载实例分析
2015/07/16 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
2015/11/25 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
2016/11/30 Javascript
js获取css的各种样式并且设置他们的方法
2017/08/22 Javascript
Angular中使用better-scroll插件的方法
2018/03/27 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
JS判断数组里是否有重复元素的方法小结
2019/05/21 Javascript
axios如何取消重复无用的请求详解
2019/12/15 Javascript
js+canvas实现纸牌游戏
2020/03/16 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
2020/07/19 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
2020/07/23 Javascript
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
浅谈flask中的before_request与after_request
2018/01/20 Python
python pytest进阶之conftest.py详解
2019/06/27 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
Python3爬虫发送请求的知识点实例
2020/07/30 Python
秦兵马俑教学反思
2014/02/07 职场文书
外语系毕业生求职自荐信
2014/04/12 职场文书
公务员年终个人总结
2015/02/12 职场文书
风雨哈佛路观后感
2015/06/03 职场文书
Mysql存储过程、触发器、事件调度器使用入门指南
2022/01/22 MySQL
MYSQL中文乱码问题的解决方案
2022/06/14 MySQL