XserverにVueプロジェクトをアップロードする

Macで作成したVueプロジェクトをXserver(エックスサーバー)で動かす方法です。

※ローカル環境にVueプロジェクトを作る方法はこちら

MacでVue2+Vue CLI+Vuetifyの環境を作る

vue.config.jsを編集する

まず、プロジェクトの直下にあるvue.config.jsファイルを開きます。

vue.config.jsの場所

これを開くと
vue.config.js変更前

となっているので、これにpublicPath: './'を加えます。

vue.confing.js変更後

これで準備はOKです。

アップロード用環境を作成する

ターミナルからコマンドで該当プロジェクトの場所へ移動し、以下のコマンドを実行します。

$ npm run build

コマンドが成功すると、新しくdistという名前のフォルダが出来上がります。

dist作成後

Xserverにアップロードする

アップロード方法は何でも良いですが、上記で作成したローカルにあるdistの構成をそのまま、ご自身で利用しているドメイン内のpublic_html直下に入れます。

詳しくは、Xserverのサポートページをご覧ください。
ホームページのファイルはどこへアップロードすればいいですか?

public_html直下に入れたら、ブラウザで「https://(ドメイン名)/dist/」にアクセスすると、ローカル環境と同じように表示されます。

ちなみにdistはただの初期名称なので、public_html直下のdistフォルダ名を変更すれば違うURLでアクセスできるようになります。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


ABOUTこの記事をかいた人

子どもが産まれたことをきっかけに働き方を見直し、フリーランスSEになった30代の父親。 埼玉県某市在住。 妻と娘(5歳)とペット(フェレット)で、日々悩みながらも楽しく過ごしています。