vue cli 引入静态js

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，它提供了零配置的原型开发，并且可以通过插件进行扩展。在 Vue CLI 项目中引入静态 JavaScript 文件通常有以下几种方式：

基础概念

静态 JavaScript 文件是指不依赖于特定框架或环境的普通 .js 文件。它们可以在浏览器中直接运行，也可以被其他脚本引用。

类型

外部脚本：通过 <script> 标签在 HTML 文件中引入。
内部脚本：直接在 HTML 文件中的 <script> 标签内编写代码。
模块脚本：使用 ES6 模块语法 import 或 require 引入。

应用场景

第三方库：如 jQuery、lodash 等。
工具函数：通用的辅助函数或工具类。
插件脚本：需要独立运行的脚本，如地图 API、数据分析脚本等。

引入方法

方法一：在 `public/index.html` 中引入

如果你想引入的静态 JS 文件不需要参与 Vue 的构建过程，可以直接在 public/index.html 文件中通过 <script> 标签引入。

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- ... -->
</head>
<body>
    <div id="app"></div>
    <!-- 引入静态 JS 文件 -->
    <script src="./static/js/myScript.js"></script>
</body>
</html>

方法二：在 Vue 组件中引入

如果你需要在特定的 Vue 组件中使用静态 JS 文件，可以在该组件的 <script> 部分使用 import 或 require 语句引入。

// 在 Vue 组件中引入静态 JS 文件
<script>
import myScript from '@/static/js/myScript.js';

export default {
    mounted() {
        // 使用 myScript 中的功能
        myScript.someFunction();
    }
}
</script>

方法三：在 `vue.config.js` 中配置

如果你想让静态 JS 文件被 Webpack 处理，可以在 vue.config.js 文件中进行相应的配置。

// vue.config.js
module.exports = {
configureWebpack: {
externals: {
'myScript': 'myScript' // 假设 myScript 是全局变量名
}
}
};

然后在 HTML 中通过 CDN 或本地路径引入：

<!-- public/index.html -->
<script src="https://example.com/path/to/myScript.js"></script>

遇到的问题及解决方法

问题：静态 JS 文件没有被正确加载

检查路径：确保文件路径正确无误。
检查网络：确认网络连接正常，文件能够被访问。
查看控制台：打开浏览器的开发者工具，查看控制台是否有错误信息。

解决方法：

确保文件存在于指定的路径下。
如果是通过 CDN 引入，检查 CDN 是否可用。
如果是在构建过程中出现问题，检查 vue.config.js 的配置是否正确。

示例代码

假设我们有一个简单的静态 JS 文件 myScript.js：

// static/js/myScript.js
export function greet(name) {
console.log(`Hello, ${name}!`);
}

在 Vue 组件中引入并使用它：

// MyComponent.vue
<template>
<div>{{ message }}</div>
</template>

<script>
import { greet } from '@/static/js/myScript.js';

export default {
data() {
return {
message: ''
};
},
mounted() {
greet('World');
this.message = 'Greeting has been displayed.';
}
}
</script>

以上就是在 Vue CLI 项目中引入静态 JS 文件的基础概念、相关优势、类型、应用场景以及可能遇到的问题和解决方法。