投稿2022/11/23 01:08
編集2022/11/23 03:15Vue + Laravel で SPAのWebシステムを構築しています。
ハンディターミナル(QRコードリーダー)からブラウザを使用し
同一ネットワーク上のサーバーにアクセスしています。
フロントサイドはvue.js、DBとの通信にLaravelを使用しています。
Vue.jsでハンディを提供されている会社様のjava scriptファイルを
読み込みブラウザからハンディの制御を行うつもりです。
ただ、提供されたjsファイルが Export の形ではなく functionべた書きな為
Vue.jsでImportすることができません。
functionべた書きのjsファイルをVue.jsでImportする方法を探しています。
エラーメッセージなし
外部jsについては公開が禁止されているため例示
・外部js
Javascript
1var HOGE = HOGE || { 2 Scan: {}, File: {}, FTP: {} 3}; 4 //略 5HOGE.FTP = (function () { 6 //略 7 return { 8 Settings: Settings 9 } 10}()); 11
・index.php(npmで自動生成されたもの)
php
1<?php 2 3use Illuminate\Contracts\Http\Kernel; 4use Illuminate\Http\Request; 5 6define('LARAVEL_START', microtime(true)); 7 8/* 9|-------------------------------------------------------------------------- 10| Check If The Application Is Under Maintenance 11|-------------------------------------------------------------------------- 12| 13| If the application is in maintenance / demo mode via the "down" command 14| we will load this file so that any pre-rendered content can be shown 15| instead of starting the framework, which could cause an exception. 16| 17*/ 18 19if (file_exists($maintenance = __DIR__.'/../storage/framework/maintenance.php')) { 20 require $maintenance; 21} 22 23/* 24|-------------------------------------------------------------------------- 25| Register The Auto Loader 26|-------------------------------------------------------------------------- 27| 28| Composer provides a convenient, automatically generated class loader for 29| this application. We just need to utilize it! We'll simply require it 30| into the script here so we don't need to manually load our classes. 31| 32*/ 33 34require __DIR__.'/../vendor/autoload.php'; 35 36/* 37|-------------------------------------------------------------------------- 38| Run The Application 39|-------------------------------------------------------------------------- 40| 41| Once we have the application, we can handle the incoming request using 42| the application's HTTP kernel. Then, we will send the response back 43| to this client's browser, allowing them to enjoy our application. 44| 45*/ 46 47$app = require_once __DIR__.'/../bootstrap/app.php'; 48 49$kernel = $app->make(Kernel::class); 50 51$response = $kernel->handle( 52 $request = Request::capture() 53)->send(); 54 55$kernel->terminate($request, $response);
・Vue.js(vue-cli)にて外部jsライブラリを読み込みたかった…(雑記)
⇒ laravel環境なのでindex.htmlではなくindex.phpになっているため不可能。
お手数をおかけしますが、何か情報ありましたらお願いいたします。
@vue/cli 5.0.4
Laravel Framework 9.17.0
回答2件
0
Laravelでフロントを扱うときはlaravel-mixか今ならviteを使うのが普通なので
vue/cliを直接使ってる時点で普通じゃない使い方をしている。
https://laravel.com/docs/9.x/mix
https://laravel.com/docs/9.x/vite
index.phpはLaravelのファイルなのでnpmは何も関係ない。
明らかにLaravelの基礎を理解してない質問なのでそれに合わせた回答。
1 その外部jsをhoge.jsとするとこのファイルはpublic/js/hoge.jsに置く。public内のファイルは http://localhost/js/hoge.js でそのまま表示できる。
2 app.blade.phpでこのhoge.jsを読み込む。普通にindex.htmlで外部jsを読み込んでるのと同じ。Laravelだからと特別なことは何もない。
<script src="{{ asset('js/hoge.js') }}" defer></script> <script src="{{ asset('js/app.js') }}" defer></script>
3 グローバルに読み込んだのでvue内でもwindow.HOGE.FTPで使える。元の外部jsが関数として使えるように作られてないのでwindow.HOGE.FTP()では使えない。後は外部jsの使い方の話。
投稿2022/11/23 09:07
総合スコア10377
0
importせずに、JavaScriptはHTMLから別途読み込んでwindow.HOGEの形で呼び出しておく、という方法でとりあえず対応してみてはどうでしょうか。
投稿2022/11/23 01:27
総合スコア145184
あなたの回答
tips
プレビュー
Q&A
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/11/24 05:46
2022/11/24 06:30