vue indev.html,webpack - Can't add <script> tag to Vue component files ( *.vue ) - Stack Overflow
时间: 2024-02-28 21:54:51 浏览: 116
Vue中通过<script></script>引入的Vue.js文件
5星 · 资源好评率100%
这个问题可能是由于webpack配置不正确导致的。在Vue组件中添加一个<script>标签是不被支持的,因为Vue组件的模板会被转换为JavaScript代码,而JavaScript代码中不能包含HTML标签。
如果你想在Vue组件中引入JavaScript文件,可以使用import语句或在webpack配置文件中配置正确的loader来实现。具体来说,你可以使用Vue CLI提供的默认配置或者手动配置webpack来解决这个问题。
以下是一个使用Vue CLI默认配置的示例:
1. 在你的Vue组件中使用import语句来引入JavaScript文件:
```
<template>
<div>
<h1>Hello World</h1>
</div>
</template>
<script>
import myScript from './myScript.js';
export default {
name: 'MyComponent',
mounted() {
myScript.doSomething();
}
}
</script>
```
2. 确认你的webpack配置文件中包含了正确的loader配置。在Vue CLI中,你可以在vue.config.js文件中进行配置:
```
module.exports = {
configureWebpack: {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
}
}
```
这个配置告诉webpack在加载JavaScript文件时使用babel-loader来进行转换,以确保代码可以在浏览器中正确运行。
阅读全文