vue historyルーティングによるサーバ導入の問題

1939 ワード

導入に関する問題の検出
展開中に開いているページが空白であることに気づきました
導入前の原理
以前のページは静的ファイルとしてサーバにパッケージアップロードされていました
http://www.xiedashuaige.cn/bolg2.0/#/home
このページと同じように、私は実は1つのページしかありません/bolg 2.0
そしてフロントエンドのルーティング切替はいずれも後のハッシュ値によって変化する
その後、異なるハッシュ値が指すページは/bolg 2.0ページですか?
静的ディレクトリに配置してアクセスできます
配備の問題解決
そしてhistoryルーティングで開いたページを使ったとき、サーバ新聞404が見つかりました.
http://www.xiedashuaige.cn/BolgAdmin/admin
まず私がサーバ上で対応する静的ページは/BolgAdminページです
しかし、私のフロントエンドルーティングのトップページは/BolgAdmin/adminというページです.
ただし、サーバは/BolgAdmin/adminが単独のページリソースであると考えています.
そしてまたこのリソースが見つからないので、404に報告します.
問題を分析する
そして2つの解決策を考えました
  • は、サーバに転送を設定し、すべての/BolgAdminの下のサブルーティングを/BolgAdminページの下に転送することですが、サーバの私にはよくわかりません.
  • nodeでバックエンドを書くとhttp://www.xiedashuaige.cn:3000を選択し、http://www.xiedashuaige.cn:3000/BolgAdmin/adminのページをすべて転送http://www.xiedashuaige.cn:3000/BolgAdmin以上、apacheを使用するよりもnodeで実現できるので、簡単に変更できるはずですが、私はまだ研究中です.

  • 問題を解決する
    ちょうどkoaを学んでkoaで1つのサーバーを構築して、コードは以下の通りです
    const fs = require('fs')
    const Koa = require('koa')
    const route = require('koa-route')
    const path = require('path')
    const static = require('koa-static')
    const app = new Koa()
    
    const main = ctx => {
      ctx.response.type = 'html'
      ctx.response.body = fs.createReadStream(path.join(__dirname,  '/index.html'))
    }
    const toMain = ctx => {
      ctx.response.redirect('/admin/')
    }
    
    const staticFile = static(path.join(__dirname, '/'))
    
    app.use(staticFile)
    app.use(route.get('/', toMain))
    app.use(route.get('/admin/*', main))
    
    app.listen(3001)
    
    

    実は静的ディレクトリを構築し、/ディレクトリを/adminディレクトリにリダイレクトし、/admin/*ディレクトリをすべてindexファイルを開きます.
    これでvue historyモードの単一ページアプリケーションを開くことができます
    締めくくり
    実は最後に一つ問題があります.私のこのプロジェクトに対するものです.私のこのプロジェクトはvueのエージェントを使ってドメインをまたいで、それからバックエンドはgoで書いた別のポートを走っているので、最後に直接パッケージしたファイルをgoに同じ処理をさせて、実は主にhistoryモードで発生する問題を理解しました.