Visual Studio Codeで、Web開発に多用される拡張機能「Live Server」でルートディレクトリを指定する方法について、無駄にはまったので記録
webpackやnpmのサーバー機能を構築する方法に比べて手軽なのでよく使いますが、適切な位置がルートとして設定されていないと、ファイル内で別ファイルを絶対位置で参照しているような場合、正しく表示されない場合があります。
解決方法
方法としては単純で、ルートディレクトリにしたいディレクトリをVSCodeで開いて、LiveShareを開くだけです。
以下ルートディレクトリを指定してLive Serverを使用する方法の詳細例
ルートディレクトリの指定方法
例えば以下のようなディレクトリ構造で、ディレクトリ「dist」をルートとして仮定し、その他は開発で用いる環境というような場合
File Tree：
MyThree // 現在開いているディレクトリ
├── babel.config.js
├── dist // LiveServerでルートとしたいディレクトリ
│ ├── assets
│ ├── images
│ ├── index.html
│ ├── script
│ │ └── bundle.js
│ └── stylesheets
├── environment
├── node_modules
├── package.json
├── package-lock.json
├── README.md
├── src
│ ├── assets
│ ├── images
│ ├── index.html
│ ├── script
│ │ └── app.ts
│ └── stylesheets
├── tsconfig.json
└── webpack.config.jsdist内のJavascriptファイルやHTMLファイル内で絶対位置でファイルをインポートしている場合、適切内位置がルートとして設定されていないと、Not Foundのエラーが出てページが正しく表示されない場合があります。
VSCodeで開いているフォルダがルートディレクトリになるので、以下のようにルートにしたいディレクトをVSCodeで開くことで解決します。
手順1：「ファイル」→「新しいウィンドウ」
手順2：「ファイル」→「フォルダーを開く」（ルート位置）
新しいウィンドウを開く必要は別にありませんが、開発用のウィンドウと表示確認用のウィンドウの2つを開いていたほうが、逐一切り替えなくてよいので便利です。
手順3：開きたいファイル（index.html）を右クリック→「Open with Live Server」
もしくは、ウィンドウ右下の「Go Live」
なにか複雑な設定が必要なのかと思いましたがこれだけで解決しました。
Live Serverを開くと以下のURLようになり、ルートがdistになってその直下のindex.htmlが開かれていることが分かります。
URLの例「http://127.0.0.1:5501/index.html」
以上、
