当需要在Vue项目中引入public文件夹中的js文件时，有以下两种方法：
方法一：使用HTML标签引入
可以在public/index.html中使用script标签引入js文件，在Vue组件中使用即可。例如，在public目录下有一个名为test.js的js文件，可在public/index.html中添加如下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue App</title>
</head>
<body>
<div id="app"></div>
<script src="./test.js"></script>
<!-- Vue App Script -->
<script src="./js/app.js"></script>
</body>
</html>
然后在Vue组件中即可使用test.js中的代码。例如，在某个组件中使用test.js中的方法：
<template>
<div>
<button @click="test()">测试按钮</button>
</div>
</template>
<script>
export default {
methods: {
test() {
testFunction();
}
}
}
</script>
方法二：使用vue.config.js配置
Vue CLI3.x中可以通过在vue.config.js中配置别名，实现在Vue组件中使用public中的js文件。例如，在public中有一个名为test.js的js文件，则可以在vue.config.js中添加别名：
module.exports = {
configureWebpack: {
resolve: {
alias: {
'@': resolve('src'),
'public': resolve('public')
}
}
}
}
然后在Vue组件中即可使用test.js中的代码，示例：
<template>
<div>
<button @click="test()">测试按钮</button>
</div>
</template>
<script>
import test from '@/test.js';
export default {
methods: {
test() {
testFunction();
}
}
}
</script>
以上就是关于Vue如何引用public中的js文件的完整攻略，并且提供了两个示例，希望对您有所帮助。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Vue如何引用public中的js文件 - Python技术站
微信扫一扫 
支付宝扫一扫 