在 Vue.js 项目中，`app.vue` 通常是应用程序的根组件，如果你想在这个文件中引入 JavaScript 文件，有几种方法可以实现，以下是详细的步骤和示例：
### 1. 创建 JavaScript 文件
你需要有一个 JavaScript 文件，假设我们创建一个名为 `custom.js` 的文件，并将其放在 `src` 目录下。
```javascript
// src/custom.js
export function sayHello(name) {
return `Hello, ${name}!`;
```
### 2. 在 `app.vue` 中引入 JavaScript 文件
在你的 `app.vue` 文件中，你可以使用 `import` 语句来引入这个 JavaScript 文件。
```vue
{{ message }}
```
### 3. 确保 Webpack 配置正确
如果你使用的是 Vue CLI 创建的项目，Webpack 的配置通常已经设置好了，可以直接支持 ES6 模块导入，如果你手动配置 Webpack，确保你已经安装了相关的加载器（如 `babel-loader`）并且配置了正确的规则来处理 JavaScript 文件。
在你的 `webpack.config.js` 中，可以添加以下配置来处理 JavaScript 文件：
```javascript
module.exports = {
// 其他配置...
module: {
rules: [
// 处理 JavaScript 文件
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
// 其他配置...
};
```
### 4. 运行项目
确保一切配置正确后，运行你的 Vue.js 项目，你应该能够在浏览器中看到 `Hello, World!`。
通过以上步骤，你已经成功地在 `app.vue` 中引入并使用了外部的 JavaScript 文件，这种方法可以帮助你将逻辑分离到单独的文件中，使代码更加模块化和可维护。
各位小伙伴们，我刚刚为大家分享了有关“app.vue中引入js”的知识，希望对你们有所帮助。如果您还有其他相关问题需要解决，欢迎随时提出哦！
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/720393.html
微信扫一扫 
