在Vue.js应用中引入静态JavaScript文件是常见的需求，特别是在处理一些全局配置或者第三方库时。以下将详细讲解如何在Vue项目中引入静态JS文件，包括针对不同Vue CLI版本的处理方式，以及避免常见错误的方法。
对于Vue CLI 2.0版本，静态资源通常放置在`static`文件夹下。为了引入`static`目录下的JS文件，例如`config.js`，可以直接在HTML模板（通常是`index.html`）中使用`<script>`标签引用它：
```html
<!DOCTYPE html>
<html>
<head>
<!-- ...其他头部信息... -->
</head>
<body>
<div id="app"></div>
<script src="/static/config.js" type="text/javascript"></script>
</body>
</html>
```
在`config.js`中，由于该文件不会经过Webpack编译，所以应当使用ES5语法，避免使用可能不被浏览器兼容的ES6特性。例如：
```javascript
// config.js
var config = {
networkGuard: {
accountDBID: '9E54B0CA55E447148211ACEA6F911FBC',
// ...其他配置...
}
};
```
然后，在Vue组件中可以直接使用这个全局变量`config`：
```javascript
export default {
// ...
methods: {
queryFun() {
if (!this.mobile) {
return false;
}
// ...验证逻辑...
this.listQuery.dataBaseId = config.networkGuard.accountDBID;
this.listQuery.params = config.networkGuard.countDBQry;
// ...其他操作...
}
}
};
```
对于Vue CLI 3.0及更高版本，静态资源应放置在`public`文件夹下。引入`config.js`的方式与Vue CLI 2.0类似，只需将`<script>`标签中的路径改为相对`public`目录的路径：
```html
<!-- index.html -->
<script src="config.js" type="text/javascript"></script>
```
值得注意的是，一个常见的错误是在开发环境中误用`import`语句来引入`public`目录下的静态文件。由于这些文件不会经过Webpack打包，所以使用`import`会导致在生产环境部署时失效。正确做法是像上面那样，通过`<script>`标签在HTML中引入。
此外，如果你需要在Vue组件内部访问`config.js`中的数据，可以考虑将配置数据通过Vue实例的`data`选项或者`Vuex`状态管理库注入。这样，即使不使用全局变量，也能在各个组件间共享数据。如果`config.js`的内容需要根据环境动态变化，可以考虑使用Webpack的`DefinePlugin`或环境变量文件来实现。
总结起来，Vue项目中引入静态JS文件的关键在于理解文件的存放位置（Vue CLI 2.0的`static`目录，Vue CLI 3.0及更高版本的`public`目录）以及正确地在HTML模板中引入。同时，确保在`config.js`中使用兼容性良好的ES5语法，并避免在生产环境中使用`import`语句引入这些静态资源。
weixin_534413002023-04-13资源不错，很实用，内容全面，介绍详细，很好用，谢谢分享。
