首页vue index.html动态引入script

vue index.html动态引入script

时间: 2024-10-18 11:19:14 浏览: 25

Vue.js在`index.html`中动态引入`<script>`标签可以让你在页面加载过程中异步加载脚本，这样可以提高首屏渲染速度。下面是一个简单的例子： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue App</title> </head> <body> <div id="app"></div>  <script src="path/to/vue.js" defer></script>  <script type="module"> import axios from 'axios'; // 当Vue和axios都准备好了，再执行你的应用逻辑 async function init() { const app = new Vue({ el: '#app', data: {}, mounted() { // 使用axios示例 axios.get('https://api.example.com/data') .then(response => console.log(response.data)) .catch(error => console.error(error)); } }); } // 等待Vue和axios加载完成后再运行init函数 await (async () => { await import('vue'); await axios; })(); init(); </script> </body> </html> ``` 在这个例子中，`defer`属性使得`<script>`标签的脚本不会立即执行，直到文档解析完毕。`type="module"`用于启用ES6模块导入，`await import('vue')`等待Vue库加载，然后执行你的初始化逻辑。

阅读全文