生产中的 vue-router（使用 Go 服务）

Question

我想完全分离客户端和服务器，所以我用 vue init webpack my-project 创建了一个 vuejs 项目。在这个项目中，我将 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、图像、t运行slations、调用和响应服务器）.. 但是当我尝试打开其他应该导致 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)
})

Answer 1

我可能错了，但也许您尝试访问的路由在服务器（在您的 Go http 服务器中）中得到解析。

您可以尝试在 vue-router 初始化中删除 mode: 'history' 以便它默认为 hash 模式（然后路由将在浏览器中解析）。请参阅 this link.

生产中的 vue-router（使用 Go 服务）

vue-router in production (serving with Go)

go

vue.js

vuejs2

vue-router

go-chi