web-dev-qa-db-ja.com

VueJSアプリをサブディレクトリにデプロイする

Vue動作するWebpack CLiを使用してビルドされたJSアプリのデプロイで問題が発生しています。

ルートディレクトリにアップロードするとすべてが正常にレンダリングされますが、サブフォルダー内ではすべてのリンクが壊れます。

基本hrefを追加しました：

    <base href="/dist/">

また、スクリプトはロードされますが、Webpackによって作成されたすべてのアセットパスは壊れており、画像とフォントはルートディレクトリを指しているためロードされません。

誰でも助けていただけますか？

webpackvue.jsvuejs2
17
Harry

Vue-cliのwebpackテンプレートを使用していると仮定すると、 config/index.js のassetsPublicPathプロパティを編集する必要があります-buildとdev

詳細については、ドキュメントの 静的アセットの処理 セクションをご覧ください。

更新：

CLI v3 +ユーザー向けの新しいリンク： https://cli.vuejs.org/guide/html-and-static-assets.html

プロパティが publicPath と呼ばれていることに注意してください。

21
Matt

Vue CLI 3の場合、非常に簡単です。

vue.config.jsを編集し（ない場合はプロジェクトルートディレクトリに作成します）、次の行を追加します。

module.exports = {
  baseUrl: "./"
};

または、必要なサブディレクトリ。

NODE_ENVに従って決定することもできます。 docs を参照してください。

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '/'
}

[〜＃〜] update [〜＃〜]

以下のコメントで述べたように、Vue CLI 3.3+の場合、publicPathの代わりにbaseUrlプロパティを使用します。

19
jedik

アプリをインストールした場合

npm install -g @vue/cli vue uiその後、ファイルvue.config.jsを最上位プロジェクトフォルダー（package.jsonがある場所）に作成し、上記のように貼り付けます。

0
Franz Anton Mesmer