在生产环境中使用vue-router(使用Go进行服务)

huangapple go评论75阅读模式
英文:

vue-router in production (serving with Go)

问题

我想要完全分离客户端和服务器,所以我使用 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、图片、翻译以及与服务器的请求和响应)... 但是当我尝试打开其他路由时,应该要么返回 404 错误,要么加载一个用户页面,但实际上我只得到了纯文本的 404 page not found 响应(而不是应该渲染的 vue 的 notFound 组件)...

有什么想法我做错了什么以及如何修复?

英文:

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

得分: 6

我可能错了,但也许你尝试访问的路由是在服务器上解析的(在你的Go http服务器中)。

你可以尝试在vue-router的初始化中移除mode: 'history',这样它就会默认使用hash模式(路由将在浏览器中解析)。请参考这个链接

英文:

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.

huangapple
  • 本文由 发表于 2017年9月11日 03:44:36
  • 转载请务必保留本文链接:https://go.coder-hub.com/46144883.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定