Vue CLIビルドしてサーバーなしでindex.htmlファイルを実行

Question

最新のvue-cliバージョン3. を使用しています。

私の現在の問題は、npm run buildを実行するときはいつでも、distフォルダーで生成されたファイルをサーバーなしで実行できないことです。

ブラウザでindex.htmlファイルを開くだけでいいのですが。これを行うにはどうすればよいですか？

Answer 1

参照ファイルのurlを手動で変更することで、この問題を修正できました。

それは少し苦痛ですが、これはビルド構成をいじる必要のない解決策でした。

するべきこと：

1. index.htmlを開きます
2. href=/を見つけてhref=に置き換えます
3. src=/を見つけてsrc=に置き換えます

注：Phonegapアプリを作成していたため、このソリューションが必要でした。

Answer 2

同様の問題にぶつかり、次の2つの変更が機能するようになりました。これで、index.htmlをChromeとしてファイルとしてファイルシステムからSPAを実行する）で開くことができます。

1. vue.config.js では、publicPathが設定されていなかったため、デフォルトの"/"になりました。
   相対パスを使用するように、このように空の文字列に設定する必要がありました。

   module.exports = {
       publicPath: '',
   }
   

   ^{PS：以来Vue CLI 3.3は現在非推奨のpublicPathの代わりにbaseURLを使用}

2. vue-routerのhistoryモードを使用していましたが、ローカルファイルシステムでは機能せず、パスをindex.htmlに戻します。そのため、デフォルトのhashモードに戻るためにモードを省略しました。

Answer 3

Http-serverモジュールを使用できます

npm install http-server -g
http-server dist/

通常、サーバーはポート8080で起動するため、ビルドアプリを http：// localhost：808 で提供できます。