vite

使用css预处理

1. 首先 npm add -D less

静态资源

import img from "@/assets/vue.svg?url"//url可以省略
import img2 from "@/assets/vue.svg?raw" //引入的是资源文件

环境变量

在vite环境中是import.meta.env 如果自己想添加，在根目录下创建.env文件然后

VITE_ABC="123"//注意前面必须有VITE_

如果在生产环境的环境变量不一致就需要这样操作 需要在根目录创建一个env.production里面进行配置

VITE_ABC="456"//注意前面必须有VITE_

这样在生产环境就会替换掉开发环境的

同样要是有自己定义的环境例如test测试环境

首先在package.json里面配置，用--mode test

"scripts": {
    "dev": "vite",
    "test": "vite --mode test", //这是自己加的环境
    "build": "vite build",
    "preview": "vite preview"
  },

然后再根目录创建env.test

VITE_ABC="789"

再其命令的时候 npm run test 这时候启动的环境就是test环境，当然环境变量也是

批量导入文件

在导入多文件的时候alias配置 例子

const globImportFile = import.meta.glob("@/file/*")
console.log(globImportFile); //这样导入是空的
//可以通过一下方式导入
const globImportFile = import.meta.glob("./file/*")

如果还是想通过alias配置 首先在vite.config.js

import {fileURLToPath, pathToFileURL,URL}  from "node:url" //为了多文件导入@可以使用
 resolve:{
    alias:{
     "@styles":"/src/styles",
    //  "@":"/src"
    "@":fileURLToPath(new URL('./src',import.meta.url))//通过这种方式就可以了
    }


  }
  
  const globImportFile = import.meta.glob("@/file/*") //通过以上globImportFile就不是空的了

获取到的是一个键值对的格式，可以通过Object.entries(globImportFile)转成数组，然后遍历执行

Object.entries(globImportFile).forEach(item=>{
 const [path,fn] =item
  fn()
})

注意：可以通过正则来匹配自己想要的文件

const globImportFile = import.meta.glob("@/file/*[0-9].css")//此时你导入的只有b1.css

file里面的文件

HMR热更新

在vite+vue项目中vue自带热更新功能，所以我们首先创建一个没有框架的vite项目，当改动文件保存后，可以发现虽然页面改动了，但是发现是通过刷新的方式改变的，并不是热更新

1.热更新思路

function render(){
  document.querySelector('#app').innerHTML = `
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
      <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
    </a>
    <h1>Hello Vite!</h1>
    <div class="card">
      <button id="counter" type="button"></button>
    </div>
    <p class="read-the-docs">
      Click on the Vite logo to learn more
    </p>
  </div>
`
setupCounter(document.querySelector('#counter'))
}

render()
//思路：监听文件发生变化就执行render函数

方法：import.env.hot.accect()

注意只用开发环境才有import.env.hot方法

export function render(){ //这个地方需要导出，因为newModule是一个模块
  document.querySelector('#app').innerHTML = `
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
      <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
    </a>
    <h1>Hello Vite!11</h1>
    <div class="card">
      <button id="counter" type="button"></button>
    </div>
    <p class="read-the-docs">
      Click on the Vite logo to learn more
    </p>
  </div>
`
setupCounter(document.querySelector('#counter'))
}

render()
if(import.meta.hot){ //判断有没有这个方法才进行热更新
  import.meta.hot.accept(
    newModule=>{
    console.log(newModule);
    newModule.render()
  }
  )
}