web-dev-qa-db-ja.com

LocalhostでVueJSアプリを実行する

Vue CLI/Webpackを使用してビルドされたシンプルなVueJSアプリケーションをローカルホストに実行しようとせず、ローカルサーバーからアクセスすることによってのみ、npm run devを使用せずに、npmを実行しました。ビルドを実行し、ファイルをMampのhtdocsにドラッグしましたが、それでも動作しないようですこれはプロジェクトの私のディレクトリ構造です：

enter image description here

enter image description here

これは私のルートフォルダにある私のindex.htmlです

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>demo</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

これはdistフォルダーのindex.htmlです

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <meta name=viewport content="width=device-width,initial-scale=1">
  <title>demo</title>
  <link href=/static/css/app.e1c36c05dd8e70649268723708cfb519.css rel=stylesheet>
</head>
<body>
  <div id="app"></div>
  <script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js>
  </script><script type=text/javascript src=/static/js/vendor.3fae27b6d0a0572472a3.js></script>
  <script type=text/javascript src=/static/js/app.e5eb3a5fa6134479362c.js></script>
</body>
</html>

何が欠けていますか？

ありがとうございました！

javascriptnpmwebpackvue.jslocalhost
4
Luiz Wynne

1-npm run build

2-ビルドdistフォルダーまたはdistをindex.htmlでコピーします

3-htdocs testに新しいフォルダを作成します

4-localhost/testに移動します

うまくいかない場合は、テキストエディタでソースを表示し、srcファイルのパスを変更して、ベースのhrefを追加してください。コードは/static/を示しています

私は交換します

<script type=text/javascript src=/static/js/app.e5eb3a5fa6134479362c.js></script>

これに

<script type=text/javascript src="http://localhost/test/static/js/app.e5eb3a5fa6134479362c.js"></script>

コンソールのエラーも確認してください。

4
TheBlackBenzKid

白紙のようなものですか？コンソールでエラーが発生しましたか？

ルートインデックスファイルの場所がわからないためだと思います。

試してください：
-「htdocsフォルダ」に移動して、空のフォルダを作成します（フォルダ名の例：abc）。
-プロジェクトの「config folder」に移動します。
-「configフォルダー」の中にindex.jsというjsファイルがあります
-ビルド中のindex.js内の「assetsPublicPath」パスを変更します。デフォルトには「/」しかありません。それを「/ abc /」に変更し、npm buildを実行した後、ビルドから生成されたすべてのファイルをそのフォルダー内に配置します。ルートインデックスファイルの場所を知っている必要があります。
- http：// localhost/abc /に移動します

1
Vic24032018tor