首页vue怎么引入静态js文件

vue怎么引入静态js文件

时间: 2023-09-20 21:12:32 浏览: 355

在 Vue 中引入静态 JS 文件有以下几种方式： 1. 在 index.html 中引入可以在 index.html 文件中通过 script 标签引入静态 JS 文件，如下： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue App</title> </head> <body> <div id="app"></div> <script src="./static/js/example.js"></script> </body> </html> ``` 2. 在组件中通过 import 引入可以在组件中通过 import 语句引入静态 JS 文件，如下： ``` <script> import example from '../static/js/example.js' export default { name: 'ExampleComponent', mounted() { // 使用 example 中的方法或变量 example.foo() } } </script> ``` 3. 在 main.js 中通过 import 引入可以在 main.js 文件中通过 import 语句引入静态 JS 文件，如下： ``` import Vue from 'vue' import example from './static/js/example.js' Vue.prototype.$example = example new Vue({ el: '#app', render: h => h(App) }) ``` 在这种方式中，我们将 example 对象挂载到了 Vue 的原型上，这样在任何组件中都可以通过 this.$example 访问 example 对象中的方法或变量。

阅读全文