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つのサーバーを構築して、コードは以下の通りです
実は静的ディレクトリを構築し、/ディレクトリを/adminディレクトリにリダイレクトし、/admin/*ディレクトリをすべてindexファイルを開きます.
これでvue historyモードの単一ページアプリケーションを開くことができます
締めくくり
実は最後に一つ問題があります.私のこのプロジェクトに対するものです.私のこのプロジェクトはvueのエージェントを使ってドメインをまたいで、それからバックエンドはgoで書いた別のポートを走っているので、最後に直接パッケージしたファイルをgoに同じ処理をさせて、実は主にhistoryモードで発生する問題を理解しました.
展開中に開いているページが空白であることに気づきました
導入前の原理
以前のページは静的ファイルとしてサーバにパッケージアップロードされていました
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つの解決策を考えました
問題を解決する
ちょうど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モードで発生する問題を理解しました.