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

发表于 2023-05-23  4.81k 次阅读


文章目录

由于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,谢谢!

本站文章基于国际协议BY-NA-SA 4.0协议共享;
如未特殊说明,本站文章皆为原创文章,请规范转载。

0

纵使代码万千行