VuePressでbuildしたdistのページがrootsがおかしい

前提・実現したいこと

VuePressでWebサイトをデプロイしたい.

実行した手順

勉強して,以下の手順でVuePressを作成しています.

フォルダを作ります

yarn init -yでpackage.json作ります

yarn add -D vuepressでVuePressをインストールします

docsってフォルダを作ります
その中にMarkdownのファイルを入れます
package.jsonに以下を追加

  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  }

yarn devで動作確認→OK
（.vuepressにconfig.js作っていろいろ編集）→これはあってもなくても結果は変わらなかった
yarn buildでdistフォルダが.vuepressの中にできる
この中のindex.htmlをローカル環境で開いたら動作確認とは全く違うレイアウトでした.（以下の画像）

発生している問題・エラーメッセージ

buildしたNGページは以下の画像のようになります.

この黒いボックスがいくつかあって...といった感じです.
assetのCSSもJSも反映されていないようです.

該当のソースコード

GitHubで公開しています.
nbr41to/vuepress_site

試したこと

yarnやnodejsのバージョン確認

新たにサイトを作り直して,ピュアな状態でも,同じようなことが起こりました.

行動規範の内容に同意します

回答1件

対策

/docs/.vuepress/config.js に以下のコードを追記してください。

js
1
2module.exports = {
3  configureWebpack: (config) => {
4    // 1) xserver で確認したい場合
5    config.output.publicPath = 'VuePress が出力したファイルを配置するディレクトリへのパス'
6    
7    // 2) ローカルの環境で確認したい場合
8    // const path = require('path')
9    // config.output.publicPath = path.resolve(__dirname, 'dist')
10  }
11}

原因

プロジェクトのルートディレクトリが設定されていないので、これを設定します。

Generated site does not work with local file:// access #387

補足

また、蛇足ですが VuePress はたまによくわからない動作をするので、
そういうときは粘って深掘りして調べる必要はなく、
雑な実装で適当にスルーするといいかなと思いました。

VuePress で辛いこと - Qiita

投稿2020/05/15 01:30

編集2020/05/15 03:51

nico25

総合スコア830

Knob

2020/05/15 02:27 編集

回答ありがとうございます！記入漏れがありました.本件はXserverに本番デプロイということです. ローカルではできないのはわかりましたが,なぜ本番のXserverでもできないのでしょうか？原因はローカルと同じなのでしょうか？ Netlifyの方とlinkタグやscriptタグが全然違いました. そして,この成功したNetlifyの方のHead内をごっそりコピーしたりしたのですが,ダメでした... この構成が同じファイルを使っているのに異なっているのはなんででしょうか？