• 环境
• vite 配置

环境

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

winpty  npm.cmd init vite@latest   // windows系统需要这样
winpty  npm.cmd init vite@2.8.0
or

npm init vite@latest
npm init vite@2.8.0

vite 配置

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

autoprefixer，css 自动前缀兼容

  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