vue-router in production (serving with Go)

问题

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..

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
  }
]

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)
    }))
}

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?

Edit: 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)
})

回答1:

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

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.

来源：https://stackoverflow.com/questions/46144883/vue-router-in-production-serving-with-go

标签

Vue.js

vuejs2

vue-router

go-chi