• 环境
• vite 配置

环境

vite 3.0 版本需要 node.js 16.0 以上

# npm create vite@latest 在 Windows 下需要使用 winpty，不然无法选择项目类型
winpty  npm.cmd create vite@latest
or
npm init vite@latest
winpty  npm.cmd init vite@latest

vite 配置

https://juejin.cn/post/7119455615840092173#heading-7

autoprefixer，css 自动前缀兼容

// vite.config.ts

  css: {
    postcss: {
      plugins: [
        // css自动前缀兼容
        autoprefixer({
          overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
        }),
        postCssPxToRem({
          // 自适应，px>rem转换
          rootValue: 75, // 75表示750设计稿，37.5表示375设计稿
          propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
          selectorBlackList: ['norem'] // 过滤掉norem-开头的class，不进行rem转换
        })
      ]
    }
  },

webpack 的老版本 px 单位转 rem 单位做配置

1. npm install postcss-pxtorem --save-dev
2. 根目录 postcss.config.js 配置如下

module.exports = {
  plugins: {
    autoprefixer: {
      //浏览器css自动兼容前缀配置
      overrideBrowserslist: [
        'Android 4.1',
        'iOS 7.1',
        'Chrome > 31',
        'ff > 31',
        'ie >= 8'
      ]
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
      selectorBlackList: ['.norem'] // 过滤掉.norem-开头的class，不进行rem转换
    }
  }
}

3. amfe-flexible 设置根字体大小 main.js 配置如下

import 'amfe-flexible'

文章

https://juejin.cn/post/6916304048505225223?utm_source=gold_browser_extension#heading-3

2. WebSocket 封装 https://juejin.cn/post/6896101154371928077

路由防卫

router.beforeEach(async (to, from, next) => {
  if (!to.matched.length) {
    next({
      path: '/404'
    })
  }
  // next({
  //   path: '/login',
  //   query: {
  //     redirect: to.fullPath   // 将跳转的路由path作为参数，登录成功后跳转到该路由
  //   }
  // })
  console.log(to, 'to')
  console.log(from, 'from')
  next()
})

yarn add axios vite-plugin-md vue-i18n vite-plugin-pwa  vue-router pinia vite-svg-loader   dayjs qs  @nutui/nutui

yarn add sass unplugin-auto-import unplugin-vue-components  vite-plugin-style-import  vite-plugin-mock mockjs  vite-plugin-vue-setup-extend   @vitejs/plugin-basic-ssl    --dev

打包分析

import vue from '@vitejs/plugin-vue'

/**
 * * 扩展setup插件，支持在script标签中使用name属性
 * usage: <script setup name="MyComp"></script>
 */
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

// rollup打包分析插件
import visualizer from 'rollup-plugin-visualizer'

export function createVitePlugins(viteEnv, isBuild) {
  const plugins = [vue(), VueSetupExtend()]

  if (isBuild) {
    plugins.push(
      visualizer({
        open: true,
        gzipSize: true,
        brotliSize: true
      })
    )
  }

  return plugins
}