cli3里怎么引用public里Js

在CLI3中引用public目录下的Js文件的方法有：使用相对路径、使用绝对路径、在HTML模板中直接引用。接下来，我将详细描述其中的一种方法：在HTML模板中直接引用。

在Vue CLI3项目中，public目录下的文件会在构建时直接拷贝到dist目录，并保持其路径不变。因此，引用public目录下的资源文件变得非常简单。你可以在public/index.html文件中直接通过相对路径或绝对路径引用这些文件。例如，如果你有一个public/js/custom.js文件，你可以在index.html中通过以下方式引用：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Document</title>
  <script src="/js/custom.js"></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

接下来，我将详细介绍在CLI3项目中引用public目录下Js文件的其他方法和相关注意事项。

一、使用相对路径

在Vue CLI3项目中，public目录下的文件会在构建时直接拷贝到dist目录，并保持其路径不变。因此，你可以使用相对路径来引用这些文件。在你的组件或页面中，可以通过相对路径引用public目录下的Js文件。例如，如果你的Js文件路径是public/js/custom.js，你可以这样引用：

<script src="../js/custom.js"></script>

注意事项

路径的正确性：确保路径的正确性。如果路径错误，文件将无法正确加载。
文件的相对位置：相对路径是基于当前文件的位置，因此需要确保相对路径的正确性。

二、使用绝对路径

绝对路径是指从根目录开始引用文件。在Vue CLI3项目中，public目录下的文件在构建后会被直接拷贝到dist目录。因此，你可以使用绝对路径引用这些文件。例如：

<script src="/js/custom.js"></script>

优点

路径明确：绝对路径从根目录开始，路径明确，不容易出错。
简洁：使用绝对路径可以避免相对路径带来的复杂性。

三、在HTML模板中直接引用

在Vue CLI3项目中，public/index.html文件是项目的入口HTML文件。你可以在这个文件中直接引用public目录下的Js文件。例如，如果你的Js文件路径是public/js/custom.js，你可以这样引用：

<script src="/js/custom.js"></script>

实践建议

在开发环境中测试：确保在开发环境中测试路径是否正确。
构建后验证：在项目构建后，验证路径是否正确，文件是否正确加载。

四、使用Vue组件生命周期钩子

在Vue组件中，你可以使用生命周期钩子来动态加载public目录下的Js文件。例如，你可以在mounted钩子中动态加载Js文件：

export default {
  mounted() {
    const script = document.createElement('script');
    script.src = '/js/custom.js';
    script.async = true;
    document.head.appendChild(script);
  }
}

优点

动态加载：可以在组件加载时动态加载Js文件。
避免全局污染：可以避免在全局HTML中加载不必要的Js文件。

五、使用Webpack插件

在Vue CLI3项目中，你可以使用Webpack插件来处理public目录下的Js文件。例如，你可以使用HtmlWebpackPlugin插件来自动注入Js文件：

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  configureWebpack: {
    plugins: [
      new HtmlWebpackPlugin({
        template: './public/index.html',
        inject: true,
        chunks: ['custom'],
      }),
    ],
  },
};

优点

自动注入：可以自动注入Js文件，避免手动引用。
构建优化：可以结合Webpack的构建优化功能，提高项目的构建效率。

六、结合项目管理系统

在大型项目中，管理和引用Js文件可能变得复杂。此时，使用项目管理系统可以帮助你更好地管理这些文件。例如，研发项目管理系统PingCode 和 通用项目协作软件Worktile 都是不错的选择。

研发项目管理系统PingCode

PingCode是一个专业的研发项目管理系统，提供了强大的项目管理功能。你可以使用PingCode来管理项目中的Js文件，并在项目中引用这些文件。

通用项目协作软件Worktile

Worktile是一款通用的项目协作软件，适用于各种类型的项目管理。你可以使用Worktile来协作管理项目中的Js文件，并在项目中引用这些文件。

七、总结

在Vue CLI3项目中引用public目录下的Js文件有多种方法，包括使用相对路径、使用绝对路径、在HTML模板中直接引用、使用Vue组件生命周期钩子、使用Webpack插件等。每种方法都有其优点和适用场景，你可以根据具体情况选择合适的方法。此外，结合项目管理系统如PingCode和Worktile，可以更好地管理和引用Js文件，提高项目的开发效率。

通过以上方法和建议，你可以在Vue CLI3项目中轻松引用public目录下的Js文件，并确保这些文件在项目中的正确加载和使用。