@alwing/vite-plugin-uni-resource-helper

• uniapp cli项目 vite插件

  vue页面模版中通过asserts.xxx访问静态资源，访问静态资源时自动补全路径

• 安装

  npm install @alwing/vite-plugin-uni-resource-helper

• vite环境变量初始化​

  项目更目录下新建env目录

  env目录下新建.env.development和.env.production

  # 微信小程序环境下，static目录会被打包到本地，容易超2M的限制
  # 因此微信小程序环境，可以将静态资源打包放到服务器，此处就可以设置静态资源的服务器前缀
  VITE_FTP_URL = `http://127.0.0.1:8849/base_pro/images`
    
  # 静态资源/ftp前缀
  VITE_FTP_URL = `/static/images`

  vite.config.js中配置envDir

  export default ({ command, mode }) => {
  	return defineConfig({
  	  envDir: "./env",
  	  plugins: [
  		  uni()
  	  ]
  	})
  }

• vite.config.js中导入

  import uni from '@dcloudio/vite-plugin-uni'
  import uniResourceHelper from "@alwing/vite-plugin-uni-resource-helper";
    
  export default ({ command, mode }) => {
  	return defineConfig({
  	  envDir: "./env",
  	  plugins: [
  		  uni(),
        uniResourceHelper({
  			  dts: "./src/asserts.d.ts",            //.d.ts生成路径
          // inputDir: "./src/static/images"    //静态资源存放路径
  			  inputDir: "./images"       //静态资源存放路径
  		  })
  	  ]
  	})
  }	

• 页面中使用

  main.js引入(VUE3)

  import { createSSRApp } from "vue";
  import App from "./App.vue";
  import { ASSERTS } from "virtual:resource-helper";
    
  export function createApp() {
    const app = createSSRApp(App); 
    app.config.globalProperties["asserts"] = ASSERTS;
    return { 
      app,
    };
  }

  页面中使用

  <template>
    <view class="content">
      <image class="logo" :src="asserts?.ic_tab_todo" />
    </view>
  </template>

  模版中敲asserts.代码自动提示配置

  修改shims-uni.d.ts

  /// <reference types='@dcloudio/types' />
  import 'vue'
    
  declare module '@vue/runtime-core' {
    type Hooks = App.AppInstance & Page.PageInstance;
    
    interface ComponentCustomOptions extends Hooks {
    
    }
      
    interface ComponentCustomProperties extends Hooks {
    	asserts?: ImageResource
    }
  }

  修改src/shims-uni.d.ts

  export {}
    
  declare module "vue" {
    type Hooks = App.AppInstance & Page.PageInstance;
    interface ComponentCustomOptions extends Hooks { 
    	  
    }
    interface ComponentCustomProperties extends Hooks {
    	asserts?: ImageResource
    }
  }