Nginx 部署 Vue 项目刷新后出现 404 错误通常是因为 Nginx 配置问题。 在Nginx 中部署 Vue.js 项目时,如果使用了 Vue Router 的历史模式(history mode),并且没有正确配置 Nginx,当用户刷新页面时,Nginx 会尝试直接访问 URL 对应的物理路径,而不是返回 Vue 应用的入口文件(通常是 index.html)。这会导致 404 错...
// this.$router.push('/main') }, 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 2.发起网络请求之前在main.js需要对axios包进行全局配置 可以通过axios.defaults.baseURL = '地址'配置请求的根路径 // 导入axios import axios from 'axios' // 全局挂载axios Vue.prototype.$axios = axios 1...
1.2 路由按模块配置 文件路径: src > router > index.js 新建文件: src > router > home.js 新建文件: src > router > info.js index.js import Vue from 'vue' import Router from 'vue-router' // 引入首页 home.js import home from './home' // 引入信息内容页 info.js import info from '....
2.1 重写api 2.2 vue-router跳转index页面避免出现404等界面 2.3 添加头部信息 2.4 还有人说是前端打包时baseURL的问题 3.我的解决方案: 3.1在前端config.js将这个localhost改为自己服务器端的地址,端口则是自己后端的端口 3.2 在Nginx.conf添加拦截路径和代理地址,ip和端口和上一步一致 *注意: 1.先看问题情况 ...
一、官网上下载nginx,下载地址http://nginx.org/en/download.html,解压下载的nginx文件。 例如: 二、解压后 三、双击打开nginx.exe,访问localhost可看到如下界面 四、打开文件夹 conf下的nginx.conf配置文件作如下配置,在history模式出现刷新后404的情况,箭头指向的就是解决办法。
a方法中的histroy模式是取消vue-router的默认hash模式,所以我选择了第二种方法,结果尝试发现无效… 具体的可以参考官方文档:https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90在vue里的router里,把之前的/networth/,改成gcmanage...
Nginx部署Vue项目以及解决刷新页面404问题「建议收藏」 大家好,又见面了,我是全栈君。 一、打包项目 1.在项目中的package.json上右键,点击Show npm Scripts 2.打包(或者直接在项目根目录运行 npm run build 命令) 3.成功后会在项目根目录生成dist文件夹...
const router = new VueRouter({ mode: 'history', routes: [ { path: '*', component: NotFoundComponent } ] }) 1. 或者,如果你是用 node.js 作后台,可以使用服务端的路由来匹配 URL,当没有匹配到路由的时候返回 404,从而实现 fallback。
以往部署vuejs应用都是直接在nginx的location为/下直接部署,这次遇到要将vue应用部署在/vuejs-admin的非根下,使用以往部署方案直接访问就会404,这时修改步骤如下: 1、修改项目router配置,如下: 这里一是要修改router模式为history,另一个就是修改base地址为要访问的/vuejs-admin的地址,注意前后都有斜线 ...
# 也是一样的 在创建vue项目的时候 只需要选择了 router那么就会帮我们自动创建 # 没有选择的话需要手动下载 cnpm install router 1. 2. 3. 4. 1 使用步骤 # 1.新建文件夹router/index.js 在const routes中写路由配置 const routes = ['路由1','路由2'] ...