2023uniapp如何引入js文件

随着Uniapp的不断发展壮大，越来越多的开发者开始使用它来开发跨平台应用程序。在开发过程中，有时可能需要引入一些自己编写的js文件。本文将介绍使用Uniapp如何引入js文件的方法。

一、在页面中引入js文件

1. 在pages目录下找到需要引入js文件的页面（例如：index.vue）
2. 在该页面的script标签中，使用如下代码引入js文件：

import xxx from '@/xxx.js' 

其中，'@' 符号表示项目根目录，xxx表示自己编写的js文件名称。如果该文件不在根目录下，则需要修改引入路径。

3. 在代码中使用该js文件中的方法或变量，例如：

xxx.doSomething();

二、在组件中引入js文件

1. 找到需要引入js文件的组件文件（例如：my-component.vue）
2. 在该组件的script标签中，使用如下代码引入js文件：

import xxx from '@/xxx.js' 

同样，'@' 符号表示项目根目录，xxx表示自己编写的js文件名称。如果该文件不在根目录下，则需要修改引入路径。

3. 在组件代码中使用该js文件中的方法或变量，例如：

mounted() {
  xxx.doSomething();
}

三、在全局中引入js文件

1. 在项目根目录下，找到vue.config.js文件
2. 在该文件中添加如下代码：

configureWebpack: {
  externals: {
    'xxx': 'xxx'
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
}

其中，'xxx': 'xxx' 表示需要引入的js文件名，第一个'xxx'是该文件在项目中的名称，第二个'xxx'是在全局中的名称；'@' 符号也表示项目根目录。

3. 在需要使用该js文件的地方，使用如下代码引入：

window.xxx.doSomething();

四、总结

通过以上三种方法，我们可以在Uniapp中引入自己编写的js文件，并在页面、组件或全局中使用。在编写js文件时，需要注意命名和路径的规范，以免造成引入失败或代码混淆的情况。

以上就是uniapp如何引入js文件的详细内容，更多请关注zzsucai.com其它相关文章！