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
以下のように書き換え
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化されていなかったり、カメラの無い端末で確認したりしないようにお気をつけてｗ
あとがき
お盆休み前にvue-qrcode-readerを使用できないかと調査を依頼され、苦戦したので書いてみました。
Vue.jsは初めて使用したので無駄なことをしている部分は多いかもしれませんがとりあえず動かしてみたい人は参考にしてみてください。