Hi I’m Shendi

uniapp引入全局js          ，vue2/vue3不同方式引入

最近写小程序  
 
  
 
  
 
  
 
  
 
 ，个人开发










，选用了 uni-app 进行开发

选用的 vue3 版本

vue2版引入全局js

因为我用的 vue3 版本
  
  
  
  
  ，在这里踩了没学过vue3的坑  
  
  
  
  
 ，用vue2引入全局js的方式使用
 


 


 


 


 


，导致undefined…

Vue2 版引入全局js的方法如下

将js放到项目内
 
 
 
 
 ，一般放到自建的 common 文件夹下   
   
   
   
   
 ，且export 在 main.js 中引入和挂载 通过 this 调用

例如新建一个 util.js
 

 

 

 

 

，放到 common/js 下

util.js内容如下

在 main.js 引入和挂载

import util from "@/common/js/util.js"; Vue.prototype.$util = util;

在需要调用全局函数的页面中使用 this.$util 来调用全局函数
  
  
  
  
  
。

export default { methods: { showMessage() { this.$util.showToast(Hello World) } } }

vue3版引入全局js

文档很少

 

 

 

 

 ，在这种基础问题上浪费了我大量时间…

有两种方式

依赖注入（provide/inject）

在Vue3中           ，可以使用 provide 和 inject 来实现全局引入JS文件

将js放到项目内
 
 

 
 

 
 

 
 

 
 

，一般放到自建的 common 文件夹下









，且export 在 main.js 中使用 provide 将定义的变量或函数提供给其他组件 使用 inject 来注入 provide 提供的变量或函数

例如新建一个 util.js                ，放到 common/js 下 
 
 
 
 
 
 
 
 
 
，内容同上方vue2一致

在主入口文件（如 main.js）中















，引入全局JS文件          ，并使用 provide 方法将定义的变量或方法提供给所有组件：

uni-app的话  
 
  
 
  
 
  
 
  
 
 ，位置就在底部 const app = createSSRApp(App) 处使用就可以了










，当时我使用错了app
  
  
  
  
  ，用的最上方的  
  
  
  
  
 ，导致一直undefined

IDE会自动在上方引入 provide

import Vue, { provide } from vue

在要使用的地方使用 inject

<script> import { inject } from "vue" export default { inject : ["util"], data() { return { } }, onLoad() { }, methods: { test() { this.util.showToast("123"); } } } </script>

直接赋值

在 main.js 内使用 app.config.globalProperties 来直接赋值
 


 


 


 


 


，代码位置与上面那种方式一致

import { createSSRApp } from vue import util from @/common/js/util.js export function createApp() { const app = createSSRApp(App) app.config.globalProperties.util = util; return { app } }

使用时直接 this 调用即可
 
 
 
 
 ，一般命名会以 $ 开头

methods: { test() { this.util.showToast("123"); } }

END