Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

IMG_3866.PNG

ゴール

こちらの「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は初めて使用したので無駄なことをしている部分は多いかもしれませんがとりあえず動かしてみたい人は参考にしてみてください。

shioharu_
曲を作ってます
http://shioharu.minibird.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした