带有 CFML (Lucee) 服务器的 Vue 路由器

Question

我有标准的 Vue 路由器 - 它与导航完美配合，例如 <router-link to="/test">test</router-link>, 但是当我尝试向浏览器输入 ULR 时 http://127.0.0.1:8889/test - 它重新加载页面并给我 404 错误。

作为服务器部分，我使用 CFML (Lucee)。

Vue 代码 - routes.js

import Home from './components/home.vue' 
import Test from './components/articleView.vue' 

export const routes = [     
{ path: '/', component: Home},     
{ path: '/test', component: Test} 
]

index.js

import { routes } from './routes'
Vue.use(VueRouter); 
const router = new VueRouter({   
mode:'history',   routes 
})

new Vue({     
el: '#app',     
router,     
render: h => h(App)   
})

你能告诉我在哪里挖掘吗？

Answer 1

您需要 url 重写您的网络服务器配置，以便每个加载的历史记录路由也指向您唯一的 vue 应用程序索引文件。不知道您使用的网络服务器。但是假设你的 vue app 索引文件是 index.cfm in Tomcat 那将是如下：

#Let all static files load CSS,IMG,JS etc normally
RewriteCond %{REQUEST_URI} .*\.(cfc|cfm|map|css|js|html|png|jpg|jpeg|gif|txt|ttf|json|woff|ico)$ [OR]
RewriteRule ^(.*)$ - [L]

#Route everything else to index.cfm
RewriteRule ^(.*)$ /index.cfm [L,QSA]

带有 CFML (Lucee) 服务器的 Vue 路由器

Vue Router with CFML (Lucee) server

cfml

vue.js

lucee