vue3 vite 引入js

在 Vue 3 和 Vite 的项目中引入外部 JavaScript 文件，你可以按照以下步骤操作：

1. **安装依赖**：如果你需要引入的JavaScript文件包含一些库或插件，首先确保通过`npm`或`yarn`将其安装到你的项目中。例如，如果文件是一个自定义模块，可以在`package.json`中添加并运行`npm install <module-name>`或`yarn add <module-name>`命令。

2. **配置import路径**：Vite 默认采用基于路径的动态导入，这意味着你需要在`src`目录下创建对应文件夹，并将文件放在那里。假设你想引入的文件名为`utils.js`，应该放在`src/utils`目录下。

   // src/utils/utils.js
   //...

3. **导入文件**：然后，在你的组件、插件或者其他需要使用该模块的地方，你可以使用动态导入语法`import()`来加载它，例如：

   // 组件内
   import { yourFunction } from '@/utils/utils';
   
   // 或者全局导入并挂载到Vue原型上
   import utils from '@/utils/utils';
   Vue.prototype.$yourUtils = utils;

4. **按需使用**：当你需要使用这个JavaScript文件中的内容时，可以直接调用导入的函数或属性。

记得在构建过程中，Vite会自动处理模块划分和优化，所以在开发环境和生产环境中，引入的JS文件会被合理缓存和优化加载。