Vue開発で、外部jsファイルの内容をテンプレートで使用する方法

vue2では、ページテンプレートテンプレート内の外部jsファイルに定義した関数などの内容にアクセスしたい場合、面倒なので具体例で見てみましょう 外部のserver.jsファイルは以下の通りです。

const SERVER_IMAGE_BASE_URL = 'http://42.51.17.36:888';


export const getImageUrl = url=>{
	return SERVER_IMAGE_BASE_URL + url;
}

 vue ファイル内で使用する場合は次の 2 つの方法があり、複数のページで使用する場合は 2 番目の方法を使用するのが最適です。

方法 1:

スクリプト内のserver.jsファイルに定義されているgetImageUrlメソッドをインポートし、メソッド内で関数を定義するコードは次のとおりです。

<script>
	import {getImageUrl} from '@/utils/server.js'
	export default {
		data() {
			return {
			}
		},
		methods: {
			getUrl(url){
				return getImageUrl(url);
			}
		}
	}
</script>

このように、テンプレートでは次のように使用できます。

<span>{
   
   {getUrl('/abc/a.jpg')}}</span>

方法 2:

命令を使用して関数を Vue に挿入します。

(1) main.jsに関数が配置されているjsファイルserver.jsを導入します

import { getImageUrl } from '@/utils/server'

(2) main.js ファイル内で、ディレクティブを使用して上記のメソッドを挿入します。

const Plugin = {
	install(vue,options){
		vue.prototype.getImageUrl = getImageUrl;
	}
}
Vue.use(Plugin)

(3) 次のように、メソッド getImageUrl をテンプレート内で直接使用できます。

<text>{
   
   {getImageUrl('/abc/b.jpg')}}</text>

vue3 ではさらに便利で使いやすくなりました。ただし、セットアップ構文シュガーを使用する必要があります。テンプレート内の関数を使用するには、server.js の script タグにメソッドを導入するだけです。

<script setup>
import { get_img_url } from '../utils/urls';
</script>

 <img :src="get_img_url(abc.png)" alt="">