vue路由配置:

const router = new VueRouter({base: process.env.BASE_URL,//hash模式下部署到服务器访问没问题，history就不行，需要在服务器上配置mode: 'history',routes
})

vue.config.js配置:

module.exports = {lintOnSave: false,publicPath: process.env.VUE_APP_PATH,// publicPath : process.env.NODE_ENV === 'production' ? './' : '/',outputDir: 'dist',devServer: {disableHostCheck: true,// overlay: { // 让浏览器 overlay 同时显示警告和错误//   warnings: true,//   errors: true// },https: false, // https:{type:Boolean}open: false, //配置后自动启动浏览器hotOnly: true, // 热更新proxy: { //配置多个代理"/api": {target: "http://192.168.2.241",changeOrigin: true,ws: true, //websocket支持secure: false,},}},
}

404报错原因：

当我们设置了mode为history时，当前端发送路径给服务端时，服务端根本就不认识省去#的url，所以返回给我们404，因为vue是单一页面所有的页面都在index.html中，vue是用js来切换页面的，具体的解释看vue官网

解决办法:

我使用的是宝塔面板，nginx服务器，在宝塔网站伪静态设置里添加此配置保存即可解决

代码：

location / {if (!-e $request_filename) {rewrite  ^(.*)$ /index.html?s=/$1  last;break;}
}

vue项目打包部署到服务器上后页面404问题相关推荐

Vue.js-Day09【项目实战(附带完整项目源码)-day04：用户个人中心页面、用户登录页面、将项目打包部署到服务器上、项目汇报、实训心得】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 实战项目源码[链接:https://pan.baidu.com/s/1r0Mje3Xnh8x4F1HyG4aQTA 提 ...
vue项目打包部署到服务器,Vue项目打包部署到apache服务器的方法步骤
vue项目在开发环境下,让项目运行起来,是通过npm run dev命令,原理是在本地搭建了一个express服务器. 但是在服务器上就不是这样的,必须要通npm run build命令来对整个项目进 ...
vue项目打包之后放在服务器上测试的时候访问不到本地json数据的解决方法
上面的代码表示在本地开发项目时模拟后端数据.项目打包之后放在服务器上,json的路径需要按照原来的json实际路径放置才会访问到(/api/index.json)
maven项目打包部署到服务器上
创建一个maven项目,在本地工程依赖jar包启动完成后,是不够的,还需将项目文件使用maven编译打包然后部署到服务器上主流的springboot项目打包的时候需要在pom文件中指定主方法等配置 ...
vue项目打包部署到服务器
目录一.打包项目二.修改Nginx的配置三.部署四.开放端口号一.打包项目 1. 在 vue.config.js 文件中找到并修改,主要是publicPath 与outputDir 两项配置 ...
Vue项目打包部署到服务器（Linux）
一.打包(build) npm run build / yarn build 打包完成后项目路径会多出一个dist文件夹到这里本地的打包完成了然后到服务器二.服务器配置(nginx) **注:如 ...
Vue项目打包部署到Nginx服务器步骤总结
前期准备工作: 1. 准备一台服务器: 2. 根据服务器的系统环境安装配置Nginx; 3. 了解Nginx的配置文件,了解常用的linux系统操作命令 4. 进行Vue项目的打包部署因为我只是单纯 ...
vue项目打包部署-----解决打包后访问资源失败问题
vue项目打包部署-----解决打包后访问资源失败问题参考文章: (1)vue项目打包部署-----解决打包后访问资源失败问题 (2)https://www.cnblogs.com/ycsc/p/1 ...
在win10本地开发springboot项目能上传图片，并能通过URL直接从浏览器访问，但是部署到服务器上后能上传文件，但是通过浏览器无法访问图片
在win10本地开发springboot项目能上传图片,并能通过URL直接从浏览器访问,但是部署到服务器上后能上传文件,但是通过浏览器无法访问图片 1.首先springboot项目在Window和Li ...

vue项目打包部署到服务器上后页面404问题

vue路由配置:

vue.config.js配置:

404报错原因：

当我们设置了mode为history时，当前端发送路径给服务端时，服务端根本就不认识省去#的url，所以返回给我们404，因为vue是单一页面所有的页面都在index.html中，vue是用js来切换页面的，具体的解释看vue官网

解决办法:

我使用的是宝塔面板，nginx服务器，在宝塔网站伪静态设置里添加此配置保存即可解决

代码：

vue项目打包部署到服务器上后页面404问题相关推荐

最新文章

热门文章