vue 项目中怎么引用js文件

在 Vue.js 项目中引用 JavaScript 文件有多种方式，这些方式取决于你使用的 Vue.js 项目结构（例如 Vue CLI、Vite 或其他构建工具）。以下是详细的步骤和方法，涵盖了不同的场景和工具。

1. 通过 Vue CLI 项目引用 JavaScript 文件

如果你的项目是使用 Vue CLI 创建的，你可以按以下步骤引用 JavaScript 文件：

1.1 将 JavaScript 文件放在 public 文件夹中

1. 放置文件： 将你的 JavaScript 文件（例如 myScript.js）放在 public 文件夹中。

2. 引用文件： 在你的 HTML 模板中直接引用，例如，在 public/index.html 文件中添加：

   html
   复制代码
   <script src="/myScript.js"></script>
   

   这样，myScript.js 文件将在页面加载时自动被引入。

1.2 在 Vue 组件中引用 JavaScript 文件

1. 使用 import 语法： 如果你的 JavaScript 文件是 ES6 模块（即使用 export/import 语法），可以在 Vue 组件中直接导入：

   javascript
   复制代码
   // 在你的 Vue 组件脚本部分
   import myFunction from '@/path/to/myScript.js';
   
   export default {
     name: 'MyComponent',
     mounted() {
       myFunction();
     }
   }
   

   解释：

   • @ 符号是 Vue CLI 默认配置的别名，代表 src 目录。
   • 你可以在组件的 mounted 钩子中调用导入的函数。

2. 在 main.js 文件中引入： 如果你希望在应用程序的全局范围内引用 JavaScript 文件，可以在 src/main.js 中引入：

   javascript
   复制代码
   import Vue from 'vue';
   import App from './App.vue';
   import myFunction from '@/path/to/myScript.js';
   
   Vue.config.productionTip = false;
   
   new Vue({
     render: h => h(App),
     created() {
       myFunction();
     }
   }).$mount('#app');
   

2. 通过 Vite 项目引用 JavaScript 文件

如果你的项目是使用 Vite 创建的，引用 JavaScript 文件的方式类似，但有一些细微的差别：

2.1 在 Vue 组件中引用 JavaScript 文件

1. 使用 import 语法： 在 Vue 组件中导入 JavaScript 文件，和 Vue CLI 项目中的方式相同：

   javascript
   复制代码
   import myFunction from '@/path/to/myScript.js';
   
   export default {
     name: 'MyComponent',
     mounted() {
       myFunction();
     }
   }
   

2.2 在 index.html 文件中引用

1. 放置文件： 将 JavaScript 文件放在 public 文件夹中。

2. 引用文件： 在 public/index.html 中直接引用：

   html
   复制代码
   <script type="module" src="/myScript.js"></script>
   

   解释：

   • Vite 使用 ES 模块，因此需要指定 type="module"。

3. 通过 CDN 引用 JavaScript 文件

如果你使用的是 CDN 提供的 JavaScript 文件，可以在 index.html 文件中直接引用，无需将文件下载到本地。

html
复制代码
<!-- 在 public/index.html 文件中 -->
<script src="https://cdn.example.com/myScript.js"></script>

4. 使用 Webpack 配置引入

对于自定义的 Webpack 配置项目（例如使用 Vue CLI 的自定义配置），你可以在 vue.config.js 或 webpack.config.js 文件中配置 Webpack 以支持 JavaScript 文件的引入。

4.1 在 Webpack 配置中

在 Webpack 配置文件中（如 webpack.config.js），你可以设置 resolve.alias 以简化文件路径：

javascript
复制代码
const path = require('path');

module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      'myLib': path.resolve(__dirname, 'path/to/myScript.js')
    }
  }
};

然后在 Vue 组件中使用别名引入：

javascript
复制代码
import myFunction from 'myLib';

export default {
  name: 'MyComponent',
  mounted() {
    myFunction();
  }
}

总结

在 Vue.js 项目中引用 JavaScript 文件可以通过多种方式实现：

• Vue CLI 项目：将文件放在 public 文件夹中或在 Vue 组件中使用 import。
• Vite 项目：类似于 Vue CLI，但使用 type="module"。
• CDN 引用：直接在 index.html 文件中引入。
• 自定义 Webpack 配置：通过 resolve.alias 简化路径。

关键字

Vue.js, JavaScript 文件, import, Vue CLI, Vite, public 文件夹, CDN, Webpack 配置, index.html, ES 模块