携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第19天，点击查看活动详情

图片资源的使用

• 在vite中使用图片资源是个比较麻烦的问题，我们现在说说正常如何使用，以及会遇到的问题如何解决

直接在dom中引入图片

<img class="img" src="@/assets/images/pic.jpeg" alt="" />

• 使用别名导入图片，我们需要给vite配置别名

resolve: {
  alias: {
    '@': fileURLToPath(new URL('./src', import.meta.url))
  }
},

按需导入图片使用

import logo from '@/assets/logo.png'

export default defineComponent({
  setup(){
    return () =>{
      return <div>
        <img src={logo} alt="" />
      </div>
    }
  }
})

动态使用图片

• 在vite中不能使用require的方式引入图片，我们可以vite提供的方式来动态导入图片

const imgUrl = new URL('../assets/images/png/year.png', import.meta.url).href
console.log('使用 new URL ---------')

• 这里需要注意的是，图片路径要使用相对路径，不能使用别名（别名无法正确解析）

背景图片

• 背景图片可以使用别名

.bg {
  width: 300px;
  height: 200px;
  background: url('@/assets/images/png/typeScript.png');
}

vite版本问题

• 需要注意的是，有的时候vite打包后，图片无法显示，图片路径和打包后的路径不一致
• 目前查到的vite2.9都会有这个问题
• 把vite升级到3.0问题可以得到解决

vite 提供的处理引用静态文件方式

• 通过给资源路径添加不同的后缀，vite会帮助我们解析出不同类型的资源。

url

• 返回 资源的静态路径

import test from "@/test?url"

console.log(test); // /src/test.ts

raw

• 返回 资源的字符串

import test from "@/test?raw"

console.log(test); 

worker / worker inline

• 如果是计算量很大的代码，可以使用 worker ，开启新的线程加载，与主线程通信
• 定义 worker.js

// worker.js

var i = 0;

function timedCount() {
  i = i + 1;
  postMessage(i);
  setTimeout(timedCount, 500);
}

timedCount();

使用

import Worker from "@/worker?worker";

const worker = new Worker();
worker.onmessage = function (e) {
  console.log(e);
};

json

• 直接导入json

import json from "../package.json";
console.log(json);

• 也支持按需加载

import { version } from "../package.json";
console.log(version);

Web Assembly

• 我们可以在 web 中运行 二进制 内容www.assemblyscript.org/
• 安装编译环境

yarn add assemblyscript -D

• 准备编译的代码

/** Calculates the n-th Fibonacci number. */
export function fib(n: i32): i32 {
  var a = 0,
    b = 1;
  if (n > 0) {
    while (--n) {
      let t = a + b;
      a = b;
      b = t;
    }
    return b;
  }
  return a;
}

• 编译上段代码为 wasm 文件

./node_modules/.bin/asc assemb.ts --binaryFile fib.wasm

fib.zip

• 引用

import init from "./fib.wasm";
init().then(function (m) {
  console.log(m.fib(1)); // 1
});