我的配置const router = new VueRouter({hashbang: false, history: true,mode: ‘history’,routes: routes})

顺晟科技：

哥们描述详细点啊 ， 你的 todo/eo 返回 是 返回到 什么页面？ 还有为什么 /todo 可以刷新 ？ 这个页面不能刷新， 两个页面有啥不一样 ？

不过我这里原始代码是

没有加载 vue的 main.js 等等

之前没认真看…你这应该既不是nginx的问题也不是VueRouter的问题…

在routes的配置如{ name: ‘行为推荐’, path: ‘todo’, component: Task,},{ name: ‘新建询价’, path: ‘todo/eo’, component: EoIndex, },{ name: ‘新建询价’, path: ‘eo’, component: EoIndex, }

这个的作用是制定相对路径加载时候是相对于什么，比如这里就指定了相对路径是相对于 /

服务器做了fallback没？

服务器使用的是 nginx

可能存在的两个问题：

在使用http://localhost/eo/ 、http://localhost/todo/ 访问的时候刷新页面等的操作都是正常的使用 http://localhost/todo/eo/ 访问可以，但是刷新网页就会出错，页面加载是空白的，退回上一页也是空白

页面跳转的拦截router.beforeEach((to, from, next) => {if (to.path == ‘/login’) {sessionStorage.removeItem(‘user’);}let user = JSON.parse(sessionStorage.getItem(‘user’));if (!user && to.path != ‘/login’) {next({ path: ‘/login’ });} else if (user && to.path == ‘/’) {next({ path: ‘/todo’ });} else {next();}})

这样在后续遇到多个前端项目共用同一个端口情况的时候（/app1 /app2 /app3 分别代表三个前端项目），这个时候你只用把 base 改一下。

感谢，通过修改解决了问题。

看报错：

请查看访问主路径和子路径css和js文件的访问地址，有一种可能是静态文件使用的是相对路径，导致在子路径访问静态文件时增加了子路径的内容，导致路径错误

是的， 去掉history模式 是正常的，但是url中会增加一个‘#’的符号，这个就不符合公司对url的要求了。

没太看明白，你说的去掉$ 是指的这个吗 这个$不能去掉啊location / {try_files $uri $uri/ /index.html;}

history模式应该是需要服务器配置的，具体怎么配置我不知道，我上次也是因为这个问题，history去掉就好了

找到原因了，在打包发布时，需要指定项目的路径。在hash模式时，项目的根目录是不变的，而在history模式时，以/开头的嵌套路径会被当做根据经。所以更改文件webpack.prod.config.js(publicPath从’./‘更改为’/’)即可解决此问题：

该问题是打包相对路径造成的。更改vue.config.js文件中publicPath: process.env.NODE_ENV === ‘production’ ? process.env.VUE_APP_SRC : ‘./’,变更为publicPath: process.env.NODE_ENV === ‘production’ ? process.env.VUE_APP_SRC : ‘/’,即可解决。

下图是正确的加载

还有 页面的刷新是指在访问网页的时候 按F5等刷新浏览器的动作。

你好楼主，我也遇到了此问题，之前还在纠结是不是动态路由的问题，结果发现和楼主遇到的是同一个问题，请问楼主是如何解决的？

你好，非常感谢你的回复。

Uncaught SyntaxError: Unexpected token <

const publicPath = ‘’output: {publicPath: options.dev ? ‘/assets/’ : publicPath}我将const publicPath = ''修改为const publicPath = '/'就可以了。

还有我的 todo/ 并不是主菜单目录，我的主目录是/export default [{name: ‘登陆’,path: ‘/login’,component: Login},{name: ‘新版首页’,path: ‘/index’,component: NewMain},{name: ‘404’,path: ‘/404’,component: NotFound},{name: ‘主页’,path: ‘/’,component: Home,children: [//首页主显示区{name: ‘行为推荐’,path: ‘main’,component: Task,children: [{path: ‘lossCase’,name: ‘丢单关闭’,component: LossCase}, ]},{name: ‘行为推荐’,path: ‘todo’,component: Task,children: [{path: ‘lossCase’,name: ‘丢单关闭’,component: LossCase}, ]},{name: ‘新建询价’,path: ‘todo/eo’,component: EoIndex,},{name: ‘新建询价’,path: ‘eo’,component: EoIndex,},…

更好的办法就是 publicPath 永远都是 ./这个时候你打包的路径都是相对路径。然后给你的html文件添加一个 base 属性。

我可能说的不是很清楚， http://localhost/todo/eo/ 和 http://localhost/eo/ 这两个地址访问的是同一个页面，在路径配置里面有说明， 访问的都是 EoIndex.vue的内容。{ name: ‘新建询价’, path: ‘todo/eo’, component: EoIndex, },{ name: ‘新建询价’, path: ‘eo’, component: EoIndex, }

同时给vueRouter 添加一个 base: ‘/app1/’。（可以把这个值提取到一个不被打包的js文件中作为一个全局变量控制）。你就不用重复打包，只需要更改一下对应配置就行