解决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错误,本地没出错的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 多个Vue项目部署到服务器的步骤记录

    一.业务描述: 最近在做一个电商的项目,里面有平台端和商家端以及用户端,那么这么多Vue项目如何部署到服务器呢? 二.部署 (1)首先在本地测试项目可以启动并且能正常运行. (2)在项目中输入npm run build 此时会生成一个文件 (3)在服务器上安装Nginx,并将admin-web上传到服务器. 我上传的位置: (4)修改Nginx文件,找到nginx.conf  三.如果此时有多个vue项目呢? 多加几个location即可 四.最后记得保存 :wq 五.重新启动Nginx sys

  • Vue.js项目部署到服务器的详细步骤

    Vue.js项目部署到服务器的详细步骤

    前言 最近做完了一个项目,Vue.js 2.0 + vuex + axios,还是有点大的.想着做了这么久,放服务器给朋友们体验一下,帮忙找找BUG,于是就有了研究服务器这一篇文章了. 准备工作 服务器 既然是部署到服务器,肯定是需要一个云的.我这里找基友拿的一个,做测试的话,可以买阿里云的学生机,9.9 一个月,不过不是学生的话就比较麻烦,因为涉及敏感操作都需要验证码. 编译打包 将项目打包成 dist 文件,这里我需要跨域请求一些数据,还写了一个小型服务器, app.js 放到 dist 文

  • Vue Router 实现动态路由和常见问题及解决方法

    个人理解:动态路由不同于常见的静态路由,可以根据不同的「因素」而改变站点路由列表.常见的动态路由大都是用来实现:多用户权限系统不同用户展示不同导航菜单. 如何利用Vue Router 实现动态路由 Vue项目实现动态路由的方式大体可分为两种: 前端将全部路由规定好,登录时根据用户角色权限来动态展示路由: 路由存储在数据库中,前端通过接口获取当前用户对应路由列表并进行渲染: 第一种方式在很多Vue UI Admin上都实现了,可以去读一下他们的源码理解具体的实现思路,这里就不过多展开.第二种方式现

  • 解决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:&quo

  • 解决Vue 项目打包后favicon无法正常显示的问题

    在开发中经常需要为项目添加favicon以增加网站辨识度,在使用Vue开发中出现添加的favicon.ico无法显示问题,如下给出解决方法: 问题分析: 问题根源在于路径,如果使用http链接作为favicon地址一般不是出现问题,出现问题的基本在使用本地图片作为favicon. 如下常规配置: 在项目中使用大家常用的经典将图片文件与应用的index.html放在项目的根目录下,同时在index.html中正确配置favicon路径. 项目启动后会发现该中配置方式并没有生效: 打包后的项目同样存

  • vue项目打包上传github并制作预览链接（pages）

    当Vue项目完成后,在根目录下打开命令行,输入命令: npm run build 实际上此命令就是执行build.js文件,将项目打包成静态资源. 此命令完成后,项目根目录下会多出一个dist文件夹,dist文件里面有: static文件下包括项目打包后的css.js.img.fonts(字体图标). 项目资源无法加载 点击index.html,浏览器显示该页面是空白的.打开控制台看到index.html文件中没有加载任何css.js文件. 解决方法: 打开项目根目录config下的index.

  • 解决vue项目打包后提示图片文件路径错误的问题

    vue项目打包后在production模式下提示图片 '404(not found),在dev环境下好好的,打包了就提示这个错误.这是为什么呢,以前第一次使用vue-cli构建项目的的时候只有两个图片文件,当时部署后报错路径问题, 当时的想法就是简单粗暴,直接在build好的文件修改了文件路径,再后来项目中遇到了一大堆静态资源,修改路径显然是不行的,看了一下生成文件大概知道是文件目录改变了,所以引用的路径也要随之改变,网上最简单的方法是修改 'config/index.js'文件中的 build

  • vue项目在线上服务器访问失败原因分析

    珊妹儿遇到一个奇葩问题哈,跟大家伙来分享分享,首先因为刚接手的项目,我还没有线上服务器的连接信息,前端代码都是我打包好给别人,别人传到服务器的,传到线上服务器访问不了,这就是中间出现了问题. 所谓,打包就是压缩的概念,而压缩文件再次压缩就会导致文件成倍的增大,这中间就出现了很多问题,我们排除了很多问题都没找见原因,后来我就寻思拿U盘拷一份再试试,结果成功了!!!!! 据珊妹儿多年经验来分析,用U盘直接拷贝的是源文件,而压缩完传过去的压缩包再解压缩,就不是原来的文件了!嗯 应该是这个原因.....

  • 解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题

    Vue项目不能使用localhost:8xx0进入项目,但是将localhost替换为127.0.0.1却可以进入. 解决办法: 进入文件 C:\Windows\System32\drivers\etc\hosts 用记事本打开 hosts 文件进行编辑,看看文件里是否有 127.0.0.1 localhost localhost 127.0.0.1 如果没有的话就加上,具体加入位置如下 # 127.0.0.1 localhost # ::1 localhost //加上的代码 127.0.0.

  • 如何解决vue项目打包后文件过大问题

    如何解决vue项目打包后文件过大问题

    目录 为什么打包后文件过大? 如何快速解决 1.路由懒加载[使用es6提案的import()方式] 2.CDN引入 为什么打包后文件过大? 移动app项目,使用vue-cli脚手架搭建,UI主要运用的是Muse-UI,开发过程中为满足需求,混入Element-UI部分组件,加之团队开发,前端不止一人参与,在没有统一规范约束的情况下,编码风格和方式都很迥异和…混乱,以致依赖过多,打包时webpack把所有的库都打包在一起,所以vendor.js文件和app.js文件很大,最后出现进入首个页面时会长

  • 解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题

    Vue项目运行npm run build后会生成一个dist文件夹,我们一般都是把这个文件夹部署到服务器上.dist文件夹里边有一个static文件和一个index.html页面,这个index就是最后单页面的最终文件. 问题一:我在打包完成后,打开index.html文件发现地址并没有携带路由. 这样的话页面就是空白了,因为没有组件被添加到页面中.打开F12会看到一堆的红色failed请求.打开请求地址是这样的. 进入D盘就开始寻找static文件夹当然是找不到的.既然知道了是打包之后寻找文件

  • 解决vue项目本地启动时无法携带cookie的问题

    解决vue项目本地启动时无法携带cookie的问题

    解决vue项目打包部署到服务器上可以正常登录,本地启动时无法携带cookie 说一下问题:公司的老项目,从gitLab上克隆下来,启动之后登录,接口返回登录成功,然后又调用其他的接口的时候返回未登录,查看请求头,未携带cookie,因此调用接口的时候提示未登录. 但是同样的代码打包部署之后一切正常,调接口的时候是携带cookie的,一通百度之后终于解决了. 我用的是谷歌chrome浏览器 解决步骤如下: 1.在浏览器地址栏访问chrome://flags 2.搜索框内搜索SameSite,然后把

  • vue项目打包后提交到git上为什么没有dist这个文件的解决方法

    vue项目中使用npm run build打包后会生成一个dist文件,使用git推送项目后,发现git上少了一个dist文件,为什么明明本地项目中有这个文件而推上去就没有了呢? 这里会先介绍.gitignore,不想看的 请直接跳过介绍 看解决办法 一..gitignore 介绍 这里向大家简述一下.gitignore这个文件 一.简绍 我们做的每个Git项目中都需要一个".gitignore"文件,这个文件的作用就是告诉Git哪些文件不需要添加到版本管理中.比如我们项目中的npm包

随机推荐