我想将客户端和服务器完全分开,所以我用创建了一个vuejs项目vue init webpack my-project
。在这个项目中,我使用vue-
router进行所有路由(这包括特殊路径,例如/user/SOMEID
..
这是我的routes.js文件:
import App from './App.vue'
export const routes = [
{
path: '/',
component: App.components.home
},
{
path: '/user/:id',
component: App.components.userid
},
{
path: '*',
component: App.components.notFound
}
]
当我运行应用程序时,npm run dev
一切运行正常。我现在准备部署到云,所以我就跑了npm run build
。由于我需要使用HTTP服务器,因此我决定也使用Go。.这是我的Go文件:
package main
import (
"fmt"
"github.com/go-chi/chi"
"github.com/me/myproject/server/handler"
"net/http"
"strings"
)
func main() {
r := chi.NewRouter()
distDir := "/home/me/code/go/src/github.com/me/myproject/client/dist/static"
FileServer(r, "/static", http.Dir(distDir))
r.Get("/", IndexGET)
http.ListenAndServe(":8080", r)
}
func IndexGET(w http.ResponseWriter, r *http.Request) {
handler.Render.HTML(w, http.StatusOK, "index", map[string]interface{}{})
}
func FileServer(r chi.Router, path string, root http.FileSystem) {
if strings.ContainsAny(path, "{}*") {
panic("FileServer does not permit URL parameters.")
}
fs := http.StripPrefix(path, http.FileServer(root))
if path != "/" && path[len(path)-1] != '/' {
r.Get(path, http.RedirectHandler(path+"/", 301).ServeHTTP)
path += "/"
}
path += "*"
r.Get(path, http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
fs.ServeHTTP(w, r)
}))
}
我可以加载App.components.home
似乎一切正常的主页()(css,图像,翻译,对服务器的调用和来自服务器的响应)..但是当我尝试打开其他路线时,结果要么是404,要么是加载用户,然后我得到404 page not found
纯文本的响应(不是应该呈现的vue notFound组件)。
任何想法我在做什么错以及如何解决?
编辑:这是main.js文件中路由器设置的另一部分:
const router = new VueRouter({
mode: 'history',
base: __dirname,
routes
})
new Vue({
el: '#app',
router,
i18n,
render: h => h(App)
})
我可能是错的,但是也许您尝试访问的路由在服务器(在Go http服务器中)中已解析。
您可以尝试mode: 'history'
在vue-
router初始化中删除,以使其默认为hash
mode(然后路由将在浏览器中解析)。请参阅此链接。
问题内容: 如何将中间件应用于Go Gorilla Toolkit多路复用器子路由器? 我有以下代码: 我想应用一个检查安全性令牌的中间件处理程序,但仅在以开头的那些路径上。 问题答案: 以下似乎有效: 哪里 和
由于以下错误(npm 3.10.10,webpack 3.8.1),我无法使用vue routes get。如何解决这个问题 编译失败。 ./node_modules/babel loader/lib/node_modules/vue loader/lib/selector.js?type=script 我使用简单的网页包 Quotes.vue Quote.vue new-quote.vue Ap
问题内容: 假设我想要具有大致如下所示的REST端点: 如果可行,对每个对象都使用CRUD。例如,/ user POST创建一个新用户,GET获取所有用户。/ user / user_id GET仅获取该用户。 项目是特定于用户的,因此我将它们放在特定用户 user_id 下。 现在,为了使Express Routing模块化,我制作了一些路由器实例。有一个供用户使用的路由器,以及一个用于物品的路
我有没有温和的方式说骆驼应该跳过这个(没有“camelerrorhandlerhandle”属性删除)? 谢谢
从“Vue”导入Vue从“Vuex”导入Vuex从“Vue路由器”导入VueRouter从“es6promise/自动” 我尝试使用路由器,但它给出以下错误: 我创建了我的项目vue cli,然后用npm-I安装了vue路由器,为什么不这样做,或者应该使用cli命令添加? 以下是我的版本:
非常类似于这个角度问题:当使用react路由器时,如何使用锚定链接进行页面内导航? 换句话说,我如何实现以下纯超文本标记语言时使用反应路由器? 目前我截取这种链接上的点击,并滚动到锚位置。这并不令人满意,因为这意味着不可能直接链接到页面的某个部分。