在Vue项目中，我们可以将静态资源（例如图片、样式表、JavaScript文件等）放在public文件夹中，然后在HTML中通过引入该文件夹中的文件来使用它们。以下是引入public文件夹中JavaScript文件的详细步骤：
1.将需要引入的JavaScript文件放在public文件夹中（例如，创建一个名为script.js的文件）。
2.在HTML模板中添加以下代码，在body标签的闭合前引入script.js：
<body>
...
<script src="<%= BASE_URL %>script.js"></script>
</body>
在Vue项目中，可以通过<%= BASE_URL %>来获取基础链接，该链接会根据开发环境或生产环境的变化而改变。
3.将需要在JavaScript文件中使用的全局变量或方法添加到Vue实例的原型上，以使之在Vue组件中可以全局访问。以下示例演示了如何在Vue实例中添加一个名为toast的全局方法，并在组件中调用：
// 在src/main.js中
import Vue from 'vue'
import App from './App.vue'
Vue.prototype.$toast = function (message) {
// 显示一个toast提示框
}
new Vue({
render: h => h(App),
}).$mount('#app')
// 在Vue组件中调用
<template>
<div>
<button @click="$toast('Hello World!')">Click Me</button>
</div>
</template>
<script>
export default {
name: 'MyComponent',
mounted() {
this.$toast('Mounted!');
}
}
</script>
以上是一个添加全局方法的示例，你可以根据实际需求添加自己需要的全局变量或方法。
综上所述，这就是详细的Vue项目中引入public文件夹JavaScript文件的完整攻略，其中包含了两个示例。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue项目的html如何引进public里面的js文件 - Python技术站
微信扫一扫 
支付宝扫一扫 