带有 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 应用程序索引文件是 index.cfm 在 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$1 [L,QSA]