生产中的Vue路由器(与Go一起使用) [英] vue-router in production (serving with Go)

问题描述

我想将客户端和服务器完全分开，所以我用 vue init webpack my-project 创建了一个vuejs项目.在这个项目中，我使用vue-router进行所有路由(这包括特殊路径，例如/user/SOMEID ..

I'd like to separate client and server completely, so I created a vuejs project with vue init webpack my-project. In this project I'm using vue-router for all my routing (this includes special paths, like /user/SOMEID..

这是我的route.js文件:

This is my routes.js file:

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文件:

When I run the application using npm run dev everything works perfectly. I'm now ready to deploy to cloud, so I ran npm run build. Since I need to use a HTTP Server, I decided to use Go for that as well.. this is my Go file:

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页面未找到(不是应该呈现的vue notFound组件).

I'm able to load the home page (App.components.home) where everything seem to work (the css, the images, translations, calls to and responses from the server).. but when I try to open other routes that should either result in 404 or load a user, then I just get the response 404 page not found in plaintext (not the vue notFound component it's supposed to render)..

有什么主意我在做错什么以及如何解决?

Any ideas what I'm doing wrong and how to fix it?

这是main.js文件中路由器设置的另一部分:

this is the other part of the router setup in the main.js file:

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes
})

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

推荐答案

我可能是错的，但也许您尝试访问的路由已在服务器(在Go http服务器中)得到解析.

I might be wrong, but maybe the routes that you are trying to visit gets resolved in the server (in your Go http server).

您可以尝试在vue-router初始化中删除模式:'history'，以使其默认为 hash 模式(然后路由将在浏览器中解析).请参阅此链接.

You can try to remove the mode: 'history' in your vue-router initialization so that it defaults to hash mode (the routes will then resolve in browser). please see this link.

这篇关于生产中的Vue路由器(与Go一起使用)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！