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

 更新时间:2020年11月03日 11:51:01   作者:scarecrowll  
这篇文章主要介绍了解决vue项目打包上服务器显示404错误,本地没出错的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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

2、运行,在本地运行没问题,接着打包上服务器,遇到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 $emit()不能触发父组件方法的原因及解决

    Vue $emit()不能触发父组件方法的原因及解决

    这篇文章主要介绍了Vue $emit()不能触发父组件方法的原因及解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue 如何添加全局函数或全局变量以及单页面的title设置总结

    vue 如何添加全局函数或全局变量以及单页面的title设置总结

    本篇文章主要介绍了vue 如何添加全局函数或全局变量以及单页面的title设置总结,非常具有实用价值,需要的朋友可以参考下
    2017-06-06
  • vue实现微信分享功能

    vue实现微信分享功能

    这篇文章主要介为大家详细绍了vue实现微信分享功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • vue实现选项卡及选项卡切换效果

    vue实现选项卡及选项卡切换效果

    这篇文章主要介绍了vue实现选项卡选项卡切换效果,这里的Vue以单文件的形式引入,另外代码在实现上会一步步的进行优化。需要的朋友可以参考下
    2018-04-04
  • Vue波纹按钮组件制作

    Vue波纹按钮组件制作

    本文给大家分享了VUE制作点击按钮出现水波纹效果的组件过程,对此有需求的朋友可以跟着学习下。
    2018-04-04
  • Vue下载Excel后报错,或打不开的解决

    Vue下载Excel后报错,或打不开的解决

    这篇文章主要介绍了Vue下载Excel后报错,或打不开的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • vue2.x el-table二次封装实现编辑修改

    vue2.x el-table二次封装实现编辑修改

    本文主要介绍了vue2.x el-table二次封装实现编辑修改,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue中如何使用math.js

    vue中如何使用math.js

    这篇文章主要介绍了vue中如何使用math.js问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • vue如何清除地址栏参数

    vue如何清除地址栏参数

    这篇文章主要介绍了vue如何清除地址栏参数,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue项目中自定义video视频控制条的实现代码

    vue项目中自定义video视频控制条的实现代码

    这篇文章主要介绍了vue项目中自定义video视频控制条的实现代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04

最新评论