En el desarrollo de vue, cómo usar el contenido en el archivo js externo en la plantilla

En vue2, si desea acceder al contenido definido en el archivo js externo en la plantilla de plantilla de página, como funciones, es problemático. Veamos un ejemplo específico. El archivo server.js externo es el siguiente:

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


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

 Si desea utilizarlo en un archivo vue, puede utilizar los siguientes dos métodos.Si desea utilizarlo en varias páginas, es mejor utilizar el segundo método.

método uno:

Importe el método getImageUrl definido en el archivo server.js en el script y defina la función en los métodos, el código es el siguiente:

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

De esta forma, en la plantilla, se puede utilizar así:

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

Método dos:

Use instrucciones para inyectar funciones en Vue.

(1) Introduzca el archivo js server.js donde se encuentra la función en main.js

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

(2) En el archivo main.js, use la directiva para inyectar el método anterior.

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

(3) El método getImageUrl se puede usar directamente en la plantilla, de la siguiente manera:

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

Es más conveniente y simple de usar en vue3. Pero necesitamos usar el azúcar sintáctico de configuración, solo necesitamos introducir el método en server.js en la etiqueta del script para usar la función en la plantilla.

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

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