vue-routerを使って静的ページをルーティングする

Question

私はかなりWeb開発の新人です。を使用して、独自のスタイルシートとJavaScriptで静的なWebページをルーティングする方法があるのだろうかと思いました。

のは、私は含まれていstaticWebPageというディレクトリがあるとしましょう：

• index.htmlファイル
• .jsファイル
と スタイルシートディレクトリ含む .cssファイルを含む JavaScriptのディレクトリ

/mystaticwebpageをこのindex.htmlファイルにマップして、その特定の静的Webページを表示するようにしたいと思います。

私はこのような何かをしたいと思います。もちろん

import VueRouter from 'vue-router' 
import AComponent from './components/AComponent.vue' 
import MyHtmlFile from './references/index.html' 

router.map({ 
    '/acomponent': { 
     component: AComponent 
    }, 
    'mystaticwebpage': { 
     component: MyHtmlFile 
    } 
}) 

、私は唯一のrouter.mapにVueのコンポーネントを参照することができ、これは動作しません。

/staticWebPageディレクトリにある.jsと.cssファイルをすべて使用して、その./staticWebPage/index.htmlファイルにルーティングする方法はありますか。

Answer 1

あなたの場合、Webpackのコード分割機能を使用することができます。

もっと正確には、おそらく非同期コンポーネントです。そのため、コンポーネント定義で使用されているコード（およびそこに含まれているスクリプトを含む）は、対応するページにアクセスしたときにのみロードされます。

大規模なアプリケーションでは、我々は小さな チャンクにアプリを分割し、それが必要な が実際だ場合にのみ、サーバからコンポーネントをロードする必要があるかもしれません。これを簡単にするために、Vueでは、コンポーネント を、コンポーネント の定義を非同期に解決するファクトリ関数として定義することができます。 Vueは、 コンポーネントを実際にレンダリングする必要がある場合にのみファクトリ関数をトリガし、 の将来のレンダリング結果をキャッシュします。

セットアップが少し難しいかもしれませんので、VueJSドキュメントのdedicated guideを参照してください。