如何在Vue引用Public的JS文件
在Vue的开发过程中，使用JavaScript是必不可少的。在一些常用的库和插件中，可能需要引用一些全局的JS脚本。这时候就需要将这些脚本放置在Public文件夹中，并在Vue中进行引用。本文将介绍在Vue引用Public的JS文件的步骤和一些注意事项。
步骤一：将JS文件放置在Public文件夹中
首先，需要将本地的JS文件放置在Vue项目的Public文件夹中。Public文件夹是一个公共静态资源文件夹，其中的文件和文件夹不会被打包。这里需要注意的是，如果是在组件中引用，文件放置的路径需要进行相应的修改。
步骤二：在Vue中引用JS文件
在Vue中引用Public中的JS文件需要使用script标签，并将路径作为其src属性。 在Vue项目的根目录中的index.html文件中，可以看到src属性所引用的文件路径中，不会有项目名。这是因为Vue会在打包时将项目名添加到路径中。
在引入JS文件时，可以使用以下代码：
“`JavaScript
“`
步骤三：在Vue组件中使用JS文件
在Vue组件中使用Public中的JS文件，需要在引用时指定正确的路径。在组件中，可以使用以下代码：
“`JavaScript
mounted() {
this.$nextTick(function(){
var xhr = new XMLHttpRequest();
xhr.open(\’GET\’, \’/test.js\’);
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status === 200){
// do something
}
}
};
xhr.send();
});
}
“`
从上面的代码中可以看到，这里并没有使用相对路径，而是使用了绝对路径。这是因为在组件中，所有的请求都是相对于根目录的。因此，使用相对路径可能会引起错误。
需要注意的是，在组件中引用JS文件时，需要在mounted函数中进行操作，这是因为只有在mounted函数中，组件的DOM元素才被完全挂载，并且可以在其中使用document方法进行DOM操作。
注意事项：
1. 在Vue中引用Public的JS文件前，需要先确定Public文件夹中的路径是正确的。
2. 如果在组件中引用JS文件，需要注意请求路径的绝对路径和相对路径可能会造成错误，这时候需要使用绝对路径。
3. 在引用Public的JS文件时，需要在mounted钩子函数中进行操作，因为只有在mounted时，组件的DOM才会被完全挂载。
结论：
在Vue中引用Public的JS文件很简单，在引用前需要确保文件路径正确，并注意组件中引用时的路径问题。如果能够按照步骤进行操作，就可以避免各种错误和问题的出现。
