解决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 相关文章推荐
jQuery实现密保互斥问题解决方案
Aug 16 Javascript
实现只能输入数字的input不用replace方法
Sep 12 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
Mar 28 Javascript
JavaScript 学习笔记之操作符
Jan 14 Javascript
BootStrap制作导航条实例代码
May 06 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
浅谈Vue SSR 的 Cookies 问题
Nov 20 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
Nov 02 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
May 16 Javascript
Layui 数据表格批量删除和多条件搜索的实例
Sep 04 Javascript
Vue组件生命周期运行原理解析
Nov 25 Vue.js
javascript全局自定义鼠标右键菜单
Dec 08 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
德生S2000南麂列岛台湾FM收听记录
2021/03/02 无线电
关于PHP中的Class的几点个人看法
2006/10/09 PHP
PHP中字符与字节的区别及字符串与字节转换示例
2016/10/15 PHP
PHP创建单例后台进程的方法示例
2017/05/23 PHP
JavaScript OOP类与继承
2009/11/15 Javascript
mysql输出数据赋给js变量报unterminated string literal错误原因
2010/05/22 Javascript
jquery 判断滚动条到达了底部和顶端的方法
2014/04/02 Javascript
js检验密码强度(低中高)附图
2014/06/05 Javascript
JavaScript数据结构和算法之二叉树详解
2015/02/11 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
2017/04/06 Javascript
详解微信第三方小程序代开发
2017/06/23 Javascript
angular将html代码输出为内容的实例
2018/09/30 Javascript
更强大的vue ssr实现预取数据的方式
2019/07/19 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
2020/07/22 Javascript
10分钟学会js处理json的常用方法
2020/12/06 Javascript
[01:04]DOTA2:伟大的Roshan雕塑震撼来临
2015/01/30 DOTA
python使用urllib模块开发的多线程豆瓣小站mp3下载器
2014/01/16 Python
php使用递归与迭代实现快速排序示例
2014/01/23 Python
python开发之字符串string操作方法实例详解
2015/11/12 Python
python3+PyQt5+Qt Designer实现堆叠窗口部件
2018/04/20 Python
Windows下python3.7安装教程
2018/07/31 Python
使用Python向DataFrame中指定位置添加一列或多列的方法
2019/01/29 Python
详解用python自制微信机器人,定时发送天气预报
2019/03/25 Python
python 同时读取多个文件的例子
2019/07/16 Python
python 魔法函数实例及解析
2019/09/25 Python
python分布式编程实现过程解析
2019/11/08 Python
python中执行smtplib失败的处理方法
2020/07/01 Python
俄罗斯金苹果网上化妆品和香水商店:Goldapple
2019/12/01 全球购物
护理专业个人求职简历的自我评价
2013/10/13 职场文书
最新党员的自我评价分享
2013/11/04 职场文书
解除聘用合同证明书范本
2014/09/11 职场文书
莫言获奖感言(全文)
2015/07/31 职场文书
pandas数值排序的实现实例
2021/07/25 Python
Windows 11上手初体验:任务栏和开始菜单等迎来大改
2021/11/21 数码科技