vue-cliでcreateしたプロジェクトは、そのままビルドすると、出力されたdist/index.htmlが/js/vendor.a58fe84b.jsのように、絶対パスでアセットを読みに行く。 基本的にはこれで構わないケースが大半だけれど、Github Pagesにデプロイしたい場合は例外で、プロジェクト名と同じサブディレクトリ下に配置されてしまう。そうなると絶対パスから見に行くと404になってしまい、ページは動作しない。 相対パスからアセットを読みに行くようにする こういったケースはbaseUrlオプションを設定することで回避出来る。下記のファイルを作成する。 vue.config.js module.exports = { baseUrl: "./" }; こうすると、(先の例でいうと)index.htmlが./js/vendor.a58fe84b.jsを読みに行くようになる。
ここのところ仕事ではもっぱらVue.jsを使って(慣れない)フロントエンド開発をやっていたりする。 以前に触っていたAngular.jsと感触が近い部分もあって個人的にはReact.jsより親しみやすい。 昨今のフロントエンド開発というとbabelだのwebpackだのと最初に把握しなければいけない要素が多くて、昔のような「ブラウザさえあれば気軽に開発できる」という雰囲気ではなくなってしまったのが門外漢にはしんどかったりするのだが、幸いにしてVue.jsにはサクッと雛形を用意してくれるvue-cliというツールが用意されている。 今回はそのあたりについて軽くまとめてみた。 github.com 導入 何はともあれyarnとvue-cliを導入する。 $ npm install -g yarn /usr/local/bin/yarn -> /usr/local/lib/node_module
vue-cliを使って開発をしていて、開発サーバをhttps化する必要がでてきたため、vue-cliに組み込まれているdev-serverをhttps化することにした。 ソースを見るとなんてことはない、nodejsのexpressを使ってサーバを起動しているだけなので、expressのhttps化と同じやり方でいけた。 オレオレ証明書を生成する 開発サーバ用のオレオレ証明書なので、build/cert に置くことにする。 $ cd build $ mkdir cert && cd cert $ openssl genrsa 2048 > server.key $ openssl req -new -key server.key -out server.csr $ openssl x509 -req -sha256 -days 365 -in server.csr -signkey serv
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く