解决vue项目打包上服务器显示404错误,本地没出错的问题


Posted in Javascript onNovember 03, 2020

1、使用脚手架搭建一个vue项目

2、运行,在本地运行没问题,接着打包上服务器,遇到404的错误,如下

解决vue项目打包上服务器显示404错误,本地没出错的问题

这是webpack打包的结果,解决办法如下

1、修改build文件夹下的utils.js文件,大约在51行添加

publicPath:"../../"
 if (options.extract) {
  return ExtractTextPlugin.extract({
  use: loaders,
  fallback: 'vue-style-loader',
  publicPath:"../../"
  })
 } else {
  return ['vue-style-loader'].concat(loaders)
 }
 }

2、修改config下index.js文件

cssSourceMap: true 改为 cssSourceMap: false
productionSourceMap: true 改为 productionSourceMap: false,
productionGzip: true, 改为 productionGzip: false,

接着重新打包~

补充知识:vue项目打包后请求不到数据的问题

为什么我们在开发vue项目的时候需要配置反向代理,原因是因为我们本地开发的时候会出现跨域的问题,

这个时候就需要反向代理来帮我们处理跨域的问题,但是有些开发者在开发完项目的时候,会直接打包,

直接打包的话就会出现问题,请求不到数据,是因为我们打包后的项目根本就不会出现跨域了,因为我们在开发的时候走的是本地8080端口,所有才有跨域,

打包完之后不用走本地端口所有就不会出现跨域了,所以我们在打包之前要先把我们的反向代理给注释掉,这样才不会出现数据请求出错的问题。

解决vue项目打包上服务器显示404错误,本地没出错的问题

解决vue项目打包上服务器显示404错误,本地没出错的问题

以上这篇解决vue项目打包上服务器显示404错误,本地没出错的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
深入认识javascript中的eval函数
Nov 02 Javascript
文本框中,回车键触发事件的js代码[多浏览器兼容]
Jun 07 Javascript
一步一步制作jquery插件Tabs实现过程
Jul 06 Javascript
JavaScript实现拼音排序的方法
Nov 20 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
May 23 Javascript
jQuery 全选/反选以及单击行改变背景色实例
Jul 02 Javascript
jqGrid用法汇总(全经典)
Jun 28 Javascript
超全面的JavaScript开发规范(推荐)
Jan 21 Javascript
详解从买域名到使用pm2部署node.js项目全过程
Mar 07 Javascript
怎样在vue项目下添加ESLint的方法
May 16 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
Jun 06 Javascript
微信小程序绘制图片发送朋友圈
Jul 25 Javascript
解决vant-UI库修改样式无效的问题
Nov 03 #Javascript
解决vant title-active-color与title-inactive-color不生效问题
Nov 03 #Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
Nov 03 #Javascript
JavaScript语法约定和程序调试原理解析
Nov 03 #Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
Nov 03 #Javascript
React Native登录之指纹登录篇的示例代码
Nov 03 #Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 #Javascript
You might like
php 301转向实现代码
2008/09/18 PHP
ThinkPHP3.1.x修改成功与失败跳转页面的方法
2017/09/29 PHP
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
doctype后如何获得body.clientHeight的方法
2007/07/11 Javascript
关于jQuery中.attr()和.prop()的问题探讨
2013/09/06 Javascript
jQuery实现类似滑动门切换效果的层切换
2013/09/23 Javascript
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
jQuery中removeData()方法用法实例
2014/12/27 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
关于动态执行代码(js的Eval)实例详解
2016/08/15 Javascript
深入浅析jQuery对象$.html
2016/08/22 Javascript
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
JavaScript"模拟事件"的注意要点详解
2019/02/13 Javascript
详解JavaScript的数据类型以及数据类型的转换
2019/04/20 Javascript
基于JS实现前端压缩上传图片的实例代码
2019/05/14 Javascript
Vue项目中使用jquery的简单方法
2019/05/16 jQuery
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
对vue生命周期的深入理解
2020/12/03 Vue.js
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
Python构造自定义方法来美化字典结构输出的示例
2016/06/16 Python
Python中正则表达式详解
2017/05/17 Python
Python即时网络爬虫项目启动说明详解
2018/02/23 Python
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
Python动态导入模块:__import__、importlib、动态导入的使用场景实例分析
2020/03/30 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
2013/01/09 HTML / CSS
副总经理工作职责
2013/11/28 职场文书
行政专员工作职责
2013/12/22 职场文书
2015年银行柜员工作总结报告
2015/04/01 职场文书
工作迟到检讨书范文
2015/05/06 职场文书
交通处罚决定书
2015/06/24 职场文书
2016大学生暑期三下乡心得体会
2016/01/23 职场文书
2016大学先进团支部事迹材料
2016/03/01 职场文书
Mysql实现简易版搜索引擎的示例代码
2021/08/30 MySQL