Edited at

vue-qrcode-readerをとりあえず使う


vue-qrcode-readerをとりあえず使う


ゴール

こちらの「vue-qrcode-reader」を自身のレンタルサーバでとりあえず使用できる状態にします

都合上windows環境で行っているのですが、多分mac環境ならもっとすんなり行くかと思います

完成品サンプル


環境


開発環境


  • Windows10最新

  • Vagrant最新

  • VirtualBox最新


本番環境(ソース公開場所)


  • スターサーバー(ライトプラン) 無料SSL化済み


手順


cmd起動

管理者権限で行ってください


vagrant起動

vagrant up


ssh接続

vagrant ssh


node.jsインストール

マウントフォルダ以外の任意の場所でnode.jsをインストール(例はvagrantのhomeでやってます)

$ cd /home/vagrant

$ sudo yum install https://rpm.nodesource.com/pub_10.x/el/7/x86_64/nodesource-release-el7-1.noarch.rpm
$ sudo yum install nodejs -y

vagrant再起動のため、vagrantユーザーで $ exit

cmdにて vagrant reload

もう一度、vagrant ssh

以下のコマンドでバージョンが表示されればOK

$ node -v

$ npm -v


vue-cliインストール

$ sudo npm install -g @vue/cli

vagrant再起動のため、vagrantユーザーで $ exit

cmdにて vagrant reload

もう一度、vagrant ssh

以下のコマンドでバージョンが表示されればOK

$ vue -V


Vue.jsのプロジェクト作成

$ cd /home/vagrant/

$ vue create my-project

defaultでよいです。

作成できたらプロジェクト内へ移動。

$ cd /home/vagrant/my-project

サーバ起動

$ npm run serve

ブラウザで http://localhost:8080/

もしくは http://vagrantのIP:8080/

vue.jsのデフォルトのホームが表示されればOK


vue-qrcode-readerのインストール

$ cd /home/vagrant/my-project

$ sudo npm install vue-qrcode-reader


.vueファイル作成

$ vi /home/vagrant/my-project/src/Qr.vue

こちらのSource をそのままコピペします。


main.js書き換え

デフォルトのやつを流用しちゃいましょう

$ vi /home/vagrant/my-project/src/main.js

以下のように書き換え


main.js

import Vue from 'vue'

import Qr from './Qr.vue'

Vue.config.productionTip = false

new Vue({
render: h => h(Qr),
}).$mount('#app')



build実施

$ npm run build

ここでnpm run serveして確認すると「ERROR: Stream API is not supported in this browser」になっているはず。

ポートなしlocalhost、オレオレssl化済みなvagrant環境であればここでもうvue-qrcode-readerの使用ができるかも。


buildしたソースをvagrant環境からwindows環境へ

distフォルダを全てコピーします。(故にfaviconなど不要なものも入ってます)

windows環境へ持ってこれる場所ならどこでも良いです。

sudo cp -r /home/vagrant/my-project/dist /vagrant/


サーバにdistフォルダをアップロード

distをまるごとサーバに置きます


パスを修正する

アクセスすると当然と言えば当然ですが、jsやcssのパスが通っていないのでdistフォルダのindex.htmlのパスを修正します。

パスを修正すれば正常に起動するかと思います。

あとは起動が確認できたソースを好きに弄って自分の使いたいようにすればよいと思います!

無いとは思いますがSSL化されていなかったり、カメラの無い端末で確認したりしないようにお気をつけてw


あとがき

お盆休み前にvue-qrcode-readerを使用できないかと調査を依頼され、苦戦したので書いてみました。

Vue.jsは初めて使用したので無駄なことをしている部分は多いかもしれませんがとりあえず動かしてみたい人は参考にしてみてください。