vite构建vue3踩坑（路由params传参失效、tailwindcss失效等问题记录）

vite创建vue3

npm create vue@latest

构建时自行选择ts、pinina等配置（此创建指令 项目配置较为完整）

想构建其他模板（react、微信小程序） npm init vite@latest 构建时自行选择基础模板

使用less 引入全局变量

安装less即可 vite已集成less-loader

npm install less -g

Vite中，对less的全局变量进行配置 新建assets下新建main.less

在vite.config.ts 修改css配置

css: {
    // 预处理器配置项
    preprocessorOptions: {
      less: {
        //注入全局样式
        additionalData: `@import '/src/assets/main.less';`,
      },
    },
    }

main.ts引入main.less即可，vue文件中，便能直接访问到main.less，定义的变量等

使用rollup-plugin-visualizer

打包体积分析插件

cnpm i rollup-plugin-visualizer -D

基本用法 vite.config.ts 配置plugin

import { visualizer } from "rollup-plugin-visualizer";
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    visualizer({
      open: true, //在默认用户代理中打开生成的文件
      gzipSize: true, // 收集 gzip 大小并将其显示
      brotliSize: true, // 收集 brotli 大小并将其显示
      filename: "stats.html", // 分析图生成的文件名
    }),
  ],
  

打包生成stats.html

用Autoprefixer 配置css样式补全

Autoprefixer是一款基于PostCSS插件，用于解析CSS并使用Can I Use中的值向CSS规则添加供应商前缀 。它是 Google 推荐的，并在Twitter和阿里巴巴中使用。

可以实现css3代码自动补全，也可以运用到sass、less中

npm i autoprefixer

去vite.config.ts 配置css的postcss选项

export default defineConfig({
//补全css前缀 浏览器兼容
  css: {
    postcss: {// 关键代码
      plugins: [
        require("tailwindcss"),
        require("autoprefixer")({// 自动添加前缀 的浏览器
          overrideBrowserslist: [
            "Android 4.1",
            "iOS 7.1",
            "Chrome > 31",
            "ff > 31",
            "ie >= 8",
            "> 1%",
            //'last 2 versions', // 所有主流浏览器最近2个版本
          ],
          grid: true,
        }),
      ],
    },
   }
  })`
 

使用Atomic CSS(原子 CSS) 引入tailwindcss

tailwindcss 是一个 CSS 框架 ，主要特点是 utility class ，实现了原子化 css ：1个class代表1个css 属性。

中文安装文档链接 www.tailwindcss.cn/docs/instal...

npm i -D tailwindcss postcss autoprefixer 
安装依赖

npx tailwindcss init -p
创建`postcss.config.js`文件，这里的配置主要是添加`tailwindcss`的插件，这样你编写的css才会被`tailwindcss`处理；（或者在vite.config.ts配置）
创建`tailwind.config.js`文件，主要进行扫描规则、主题、插件等配置。

修改生成的tailwind.config.js

module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

！注意！这里只是配置了扫描内容，去扫描 src目录下所有以vue/js/ts/jsx/tsx 结尾的文件。 而TailwindCSS本身是一个PostCSS插件，需要配置postcss，不然css不会被tailwindcss处理！

去postcss.config.js或者vite.config.ts

postcss: {// 关键代码
      plugins: [
        require("tailwindcss")
      ],
    },

去样式文件 引入依赖样式

@tailwind base;
@tailwind components;
@tailwind utilities;

使用

<h1 class=" bg-blue-500">tailwindcss</h1>

效果

params传参失效

不是指页面刷新数据丢失问题，这种结合localStorage存储即可，有现成插件

使用name和params传参，发现获取不到params，打印为空。 官方已不推荐params传参，会刷新页面丢失，还得耗费心力处理。

**解决方案：少量数据改query传递，复杂数据用pinia或者vuex。或者History API 方式传递和接收（state） 参考文章