uni-webview-js在vite的SSR(或SSG)下的使用解决方案

277 阅读1分钟

由于uni-webview-js是基于window对象的,所以在SSR下无法使用,
vite-plugin-uniwebviewjs-ssr 插件提供了一个uni方法,该方法会在SSR下返回一个空对象,以避免报错。

安装

npm i vite-plugin-uniwebviewjs-ssr 

yarn add vite-plugin-uniwebviewjs-ssr

配置

首先在vite.config.js中引入插件,这一步是为了获取vite是否处于SSR模式

// vite.config.js  
import { defineConfig } from 'vite'  
import { uniWebviewJS } from 'vite-plugin-uniwebviewjs-ssr'  

export default defineConfig({  
  plugins: [  
    uniWebviewJS()  
  ]  
})

引入

手动引入

在您工程内任意想使用的地方引入uni方法即可

import { uni } from 'vite-plugin-uniwebviewjs-ssr'

自动引入

安装unplugin-auto-import插件,并在vite.config.js中配置

// vite.config.js  
import { defineConfig } from 'vite'  
import { uniWebviewJS } from 'vite-plugin-uniwebviewjs-ssr'  
import AutoImport from 'unplugin-auto-import/vite'  

export default defineConfig({  
  plugins: [  
    uniWebviewJS(),  
    AutoImport({  
      imports: [  
        {  
          'vite-plugin-uniwebviewjs-ssr': [  
            ['uni', 'uni']  
          ]  
        }  
      ]  
    })  
  ]  
})

这样你就可以在任意地方直接使用uni方法了,无需手动引入

使用

uni.getEnv((res) => {  
  console.log(res)  
})

更多方法请参考uni-webview-js文档中的相关信息,最后感谢uni-app团队的开发者们和您的使用,希望您能在github或者gitee上给本项目一个star,谢谢!

Github仓库:github.com/censujiang/…

Gitee仓库:gitee.com/censujiang/…