のぐそんブログ

暗いおじさんがシコシコ書くブログです。

webpack-dev-serverで立てたサーバーにIPで接続する

webpack

webpack-dev-serverでローカルにサーバーを立てた場合、localhostではなくIPでアクセスすると見ることができませんでした。

PCなどはlocalhostでアクセスすれば問題なかったりするのですが、スマホでの動作など外部のデバイスから動作を確認したい場合に少し困ります。

続きを読む

VueでグローバルなCSSを読み込む方法

Vueを利用している場合に、scopedを利用して、CSSをカプセル化するのが普通だとおもいますが、その場合bodyやhtmlに値を適応することができませんでした。

グローバルにCSSを設定するのに少し悩んだのでメモしておきます。

1. App.vueのscopedを外す

scopedを外せば、当然全ての値がグローバルに展開されます。

2. main.jsでcssをimportする

main.jsでグローバルに展開するcssをimportします。

import './assets/css/global.css'

3. publicフォルダに置いてindex.htmlで読む

静的ファイルとしてpublicフォルダ配下に置いて読み込むようにします。 一番ベーシックな方法かもしれません。

どの方法がよいか

どれでも問題ないかなと思っていますが、私個人としては2番を利用しています。

理由は...
1の場合はApp.vueが大きくなると見通しが悪くなりそうな印象があり、
3は静的ファイルに手を入れるのがなんとなく嫌だったというぼんやりとした理由です。

「Using global style rules in a Vue.js app」が参考になります。

ローカル環境でドメイン関連の検証を行う為のメモ

その他

自分用のメモです。

現在開発中のサービスが、サブドメインによってページを出し分けるような仕様です。 その為ローカルの開発環境の場合、http://localhost:8000のようになる場合、都合が悪かったです。

そこで、/etc/hostsファイルをいじって、特定のドメインを自分のローカル環境(127.0.0.1)を見るようにしたいと思います。

続きを読む

ndenvが便利だメモ

node.js

いつもグローバルにnode.jsをインストールして、利用していましたがndenvというのを利用すると、プロジェクトごとにnodeのバージョンを管理することができるようなので、利用してみよと思います。

ndenvをインストールする場合はanyenvというツールを利用するのが便利なようです。 anyenvはバージョン管理ツールを管理するツールみたいなものでしょうか。。。

続きを読む