Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Vite from entry to master | static resources

How to handle static file requests, images, text, JSON, etc in Vite

Image resources

Vite supports direct import of image resources

// App.jsx
import { defineComponent } from "@vue/runtime-core";
import "@style/index.css"
import "@style/index.less"
import classes from '@style/test.module.css'
import {a} from './test'
// Import logo.png directly and create the img tag to use
import logo from './assets/logo.png'

export default defineComponent({
    setup() {
        return () = > {
            return <>
             <div class={`rootThe ${classes.moduleClass} `} >Hello  {a.name}</div> <img src={logo} alt="" />
            </>}}})Copy the code

The Logo is displayed correctly

types

Vite provides import parameters to help us import files in a fixed way

  • Url: Puts the file somewhere to be hosted and returns the URL
  • Raw: Directly returns the string content of the file
  • Worker/worker inline: Returns the webworker
import test from './test? url' / / add? The URL returns the resource path instead of the file
console.log(test) // => /src/test.ts 

import test from './test? raw'
console.log(test) // => Prints the file code as a string
// import { A } from './types'
// import .meta.env;
// export const a: A = {
// name: "jocker"
// }
Copy the code

Test the web worker

How to use WebWorker in Vite

touch /src/worker.js

// /src/worker.js
var i = 0
function timedCount () {
    i= i + 1
    postMessage(i)
    setTimeout(timedCount, 500)
}
timedCount();
Copy the code
// main.js
import Worker from './worker? worker'
const worker = new Worker()
worker.onmessage = function (e) {
    console.log(e) // Prints the received content
}
Copy the code

JSON resources

import { createApp } from 'vue'
import App from './App'
import pkg from ".. /package.json" / / using JSON
console.log(pkg);

createApp(App).mount('#app')
Copy the code

Json deconstruction is also supported

import { createApp } from 'vue'
import App from './App'
import { version } from ".. /package.json"
console.log(version); / / = > 0.0.0

createApp(App).mount('#app')
Copy the code

Web Assembly

Binary content that can be run in a browser

AssemblyScript : www.assemblyscript.org/

Prepare the WASM file

  • Procedure Step 1 Create assemb.ts
// assemb.ts
/** 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
}
Copy the code

  • Step 2 Run the./node_modules/. Bin /asc command to compile a WASM file

     $  yarn add global assemblyscript
 $ ./node_modules/.bin/asc assemb.ts --binaryFile fib.wasm
 
 # reference web site, https://www.assemblyscript.org/compiler.html#command-line-options
Copy the code

  • Step 3 Obtain the fib.wasm file

  • Step 4 Use wASM in main.js

    // main.js
import { createApp } from 'vue'
import App from './App'

import init from "./fib.wasm"

// the init asynchronous method returns promise
init().then(m= > {
    console.log(m.fib(10))
})

createApp(App).mount('#app')

Copy the code

The Web Assembly execution succeeded. Procedure