vue开发中，如何在template中使用外部js文件中的内容

在vue2中，如果希望在页面模板template中访问外部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文件中要使用的话，可以使用以下两种方法，如果要在多个页面中使用的话，最好采用第二种方法。

方法一：

在script中导入server.js文件中定义的getImageUrl方法，在methods中定义函数，代码如下：

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

这样在template中，就可以这样使用了：

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

方法二：

采用指令的方式，将函数注入到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）在template中即可直接使用方法getImageUrl，如下：

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

在vue3中使用更方便简单了。但是需要使用setup语法糖，我们只需要在script标签中，引入server.js中的方法即可在template中使用该函数。

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

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