【Vite基础】004-Vite 中处理静态资源
【Vite基础】004-Vite 中处理静态资源
訾博ZiBo
发布于 2025-01-06 15:15:14
发布于 2025-01-06 15:15:14
代码可运行
运行总次数：0
代码可运行
【Vite基础】004-Vite 中处理静态资源
一、types 类型
1、url 路径
概述
获取导入文件的路径。
代码演示
import { defineComponent } from "vue";
import test from './test.ts?url'
console.log(test);
export default defineComponent({
setup() {
return () => <div class="root">Hello Vite !</div>;
}
});运行并访问
image-20221007111411658
2、raw 内容
概述
获取导入文件的内容。
代码演示
import { defineComponent } from "vue";
import test from './test.ts?raw'
console.log(test);
export default defineComponent({
setup() {
return () => <div class="root">Hello Vite !</div>;
}
});运行并访问
image-20221007111552577
3、worker / worker inline
概述
web worker 是一个帮助我们实现更高性能的构建应用的工具。它可以让 web worker 里面跑的计算量很大的代码放在新的线程里面运行（JavaScript 是单线程的，一些代码可能会阻塞渲染，导致页面卡顿）。
代码演示
在 src 目录下创建 worker.js 文件
var i = 0;
function timedCount() {
i = i + 1;
postMessage(i);
setTimeout(timedCount, 500);
}
timedCount();在 main.js 里测试
import Worker from './worker.js?worker'
const worker = new Worker();
worker.onmessage = function (e) {
console.log('Message received from worker', e.data);
};运行并访问
image-20221007112644085
二、JSON
1、全部导入
代码演示
在 main.js 里面
import pkg from '../package.json'
console.log(pkg);运行结果
image-20221007112842156
2、部分导入
代码演示
在 main.js 里面
import { version } from '../package.json'
console.log('version is ======>', version);运行结果
image-20221007113051985
三、Web Assembly
1、概述
是一种可以在浏览器中运行的二进制内容。
一个类似 TypeScript 的工具，可以转成 Web Assembly。 网站：assemblyscript.org
2、代码演示
第一步：创建 assemb.ts 文件
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
}第二步：将 assemb.ts 文件编译成 fib.wasm
asc 命令是无法直接使用的，如何安装教程省略了，这里暂时不再深入探索，参考网址：https://www.assemblyscript.org/introduction.html#from-a-webassembly-perspective
asc fib.ts --outFile fib.wasm --optimize第三步：在 main.js 中测试
import init from './fib.wasm';
init().then((m) => {
console.log(m.fib(10));
});本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2025-01-06，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
