Vite+Vue3插件 自动导入 本地化部署 兼容低版本浏览器

---

分享自己常用的插件

---

一、按需自动导入API

• 安装：npm i -D unplugin-auto-import
• 解决问题：解决import {ref, reactive …} 引入的问题，这样就不需要在每个组件中重复引入了
• vite.config.ts 中设置：

// vite.config.js
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue'],
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
})

• 检测到错误：通过以上的设置，已经实现自动导入了，但是ts会检测到错误，如图
  
• 解决错误：在 tsconfig.json 文件的 include 配置中加入 “./auto-imports.d.ts”

"include": ["env.d.ts", "src/**/*", "src/**/*.vue", "./auto-imports.d.ts"],

二、项目本地化部署

• 安装：npm install vite-plugin-singlefile -D
• 介绍：依赖会把项目所有资源直接打包到一个 index.html 中，这样在没有服务器的情况下双击 index.html 也能运行项目
• 解决问题：解决直接打开 index.html 打包文件报错的问题
• 报错信息：from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
• 问题原因：Vite 是直接使用 ESModule 来做模块加载的，而 ESModule 是不支持 file 协议的
  插件弊端：引起性能问题
• 在 vite.config.ts 中设置：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import { viteSingleFile } from "vite-plugin-singlefile"

// https://vitejs.dev/config/
export default defineConfig({
  base: './',
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue'],
    }),
    viteSingleFile()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
})

三、vite 兼容低版本浏览器插件

• 安装：npm i @vitejs/plugin-legacy -D
• 插件默认行为
  • 使用@babel/preset-env转换，为包中的每个块生成相应的遗留块。
  • 生成一个包含 SystemJS 运行时的 polyfill 块。
• 打包后的变化
  • 启用插件后打包完成的assets 目录多出了一些带有legacy字样的文件，每个js脚本文件都有一个与其对应的遗留版本。
  • html文件中新增了一些脚本，这些脚本根据浏览器的支持程度来动态的引入正常版本文件还是带有legacy字样的遗留版本文件。
  • 此时当项目运行在一些版本较低的浏览器时，插件添加的脚本会自动加载legacy版本的文件
• 注意
  • 和 vite-plugin-singlefile 插件一起使用时，需要注意 plugin-legacy 配置应放在前边，因为如果singlefile在前的话，会把 legacy 的依赖文件都取消，仅剩一个index.html文件
  • 要是直接打开index.html运行的话，需要将绝对路径改为相对路径，不然会有 net::ERR_FILE_NOT_FOUND 报错
  • 越是兼容低版本浏览器，生成的 legacy 文件体积就越大
• 在 vite.config.ts 中设置

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import { viteSingleFile } from "vite-plugin-singlefile"
import legacy from '@vitejs/plugin-legacy'

// https://vitejs.dev/config/
export default defineConfig({
 base: './',
 plugins: [
   vue(),
   AutoImport({
     imports: ['vue'],
   }),
   legacy({
     targets: ['chrome > 40'],
   }),
   viteSingleFile()
 ],
 resolve: {
   alias: {
     '@': fileURLToPath(new URL('./src', import.meta.url)),
   },
 },
})

四、添加 sass 预处理器

• 安装：npm install node-sass sass -D
• 对应版本

"devDependencies": {
  "node-sass": "^8.0.0",
  "sass": "^1.62.1",
}

---

😊 谢谢你阅读到了最后~
期待你关注、收藏、评论、点赞~