vite基础功能配置

几个常用的基础配置

scss

只需安装sass即可 cnpm install -D sass

<style lang="scss" scoped><style>
  
也可以使用

import './styles/index.scss'

全局scss变量

export default defineConfig({
    plugins: [
        vue(),
        vueJsx()
    ],
    css: {
        // css预处理器
        preprocessorOptions: {
            scss: {
                // 引入 var.scss 这样就可以在全局中使用 var.scss中预定义的变量了
                additionalData: '@import "./src/styles/var.scss";'//注意这里';'不能漏
            }
        }
    }
})

jsx

安装 cnpm i -D @vitejs/plugin-vue-jsx

import { defineConfig } from 'vite'
import vue from "@vitejs/plugin-vue";
import vueJsx from '@vitejs/plugin-vue-jsx'
export default defineConfig({
    plugins: [
        vue(),
        vueJsx()
    ]
})

别名alias，忽略扩展名extensions

import { defineConfig } from 'vite'
import vue from "@vitejs/plugin-vue";
import vueJsx from '@vitejs/plugin-vue-jsx'
export default defineConfig({
    plugins: [
        vue(),
        vueJsx()
    ],
    resolve: {
        //配置别名
        alias: {
            '@': '/src',
            'components': '/src/components',
            'styles': '/src/styles',
            'assets': '/src/assets',
        },
       //导入时想要省略的扩展名列表
       extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']//这里用了默认值，可以不写
    },
    css: {
        // css预处理器
        preprocessorOptions: {
            scss: {
                // 引入 var.scss 这样就可以在全局中使用 var.scss中预定义的变量了
                additionalData: '@import "@/styles/var.scss";'
            }
        }
    }
})

移动端rem,amfe-flexible,和浏览器前缀

1.amfe-flexible
amfe-flexible是配置可伸缩布局方案，主要是将1rem设为viewWidth/10。
2.postcss-pxtorem
postcss-pxtorem是postcss的插件，用于将像素（px）单元生成rem单位。**

cnpm install -D postcss-pxtorem amfe-flexible autoprefixer

main.js  新增 import 'amfe-flexible'

方案一：根目录新增 postcss.config.js 配置postcss

module.exports = {
    plugins: {
        autoprefixer: {
            //配置浏览器前缀，需要安装autoprefixer
            overrideBrowserslist: [
                "Android 4.1",
                "iOS 7.1",
                "Chrome > 31",
                "ff > 31",
                "ie >= 8",
                "last 10 versions", // 所有主流浏览器最近10版本⽤
            ],
            grid: true,
        },
        'postcss-pxtorem': {
            rootValue: 37.5,
            propList: ['*'],
            unitPrecision: 5
        }
    }
}

方案二：在vite.config.js中配置postcss

import postCssPxToRem from 'postcss-pxtorem'
export default defineConfig({
    ...
     css: {
        postcss: {
            plugins: [
                postCssPxToRem({
                    rootValue: 75, // （设计稿/10）1rem的大小
                    propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
                })
            ]
        }
    }
})

gzip

yarn add vite-plugin-compression -D

import viteCompression from 'vite-plugin-compression'

   plugins: [viteCompression()],   //https://gitcode.net/mirrors/anncwb/vite-plugin-compression

SVG

//1、yarn add vite-plugin-svg-icons -D

//2、配置config
import viteSvgIcons from 'vite-plugin-svg-icons';
import path from 'path';

export default () => {
  return {
    plugins: [
      viteSvgIcons({
        // 指定需要缓存的图标文件夹
        iconDirs: [path.resolve(process.cwd(), 'src/icons')],
        // 指定symbolId格式
        symbolId: 'icon-[dir]-[name]',
      }),
    ],
  };
};

//3、在 src/main.ts 内引入注册脚本
import 'virtual:svg-icons-register';

//4、编写全局组件 /src/components/SvgIcon.vue  main.js下加入 app.component(SvgIcon.name, SvgIcon)
<template>
  <svg aria-hidden="true">
    <use :xlink:href="symbolId" :fill="color" />
  </svg>
</template>

<script>
  import { defineComponent, computed } from 'vue';

  export default defineComponent({
    name: 'SvgIcon',
    props: {
      prefix: {
        type: String,
        default: 'icon',
      },
      name: {
        type: String,
        required: true,
      },
      color: {
        type: String,
        default: '#333',
      },
    },
    setup(props) {
      const symbolId = computed(() => `#${props.prefix}-${props.name}`);
      return { symbolId };
    },
  });
</script>

//5、在配置的icons 目录结构（src/icons）下新增[name].svg图
//6、在其他地方使用即可
  <SvgIcon name="xyxxcj"></SvgIcon>  //这里的name对应svg图的[name]

server

 server: {
        host: '0.0.0.0',//这里是服务器ip 写出0.0.0.就可以
        port: 8081,
        open: true, // 自动运行在浏览器中
        proxy: { //跨域代理
            
        }
    }

下面是完整配置

import { defineConfig } from 'vite'
import vue from "@vitejs/plugin-vue";
import vueJsx from '@vitejs/plugin-vue-jsx'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import styleImport, { VantResolve } from 'vite-plugin-style-import';
const path = require('path');
export default defineConfig({
    base: './', // 打包路径
    plugins: [
        vue(),
        vueJsx(),
        styleImport({
            resolves: [VantResolve()],
            libs: [
                {
                    libraryName: "vant",
                    esModule: true,
                    resolveStyle: (name) => {
                        return `../es/${name}/style/index`;
                    },
                },
            ]
        }),
        createSvgIconsPlugin({
            // 指定要缓存的图标文件夹
            iconDirs: [path.resolve(process.cwd(), 'src/icons/svg')],
            // 执行icon name的格式
            symbolId: 'icon-[dir]-[name]'
        }),
    ],
    resolve: {
        //配置别名
        alias: {
            '@': '/src',
            'components': '/src/components',
            'styles': '/src/styles',
            'assets': '/src/assets',
        },
        extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']//这里用了默认
    },
    css: {
        // css预处理器
        preprocessorOptions: {
            scss: {
                // 引入 var.scss 这样就可以在全局中使用 var.scss中预定义的变量了
                additionalData: '@import "@/styles/var.scss";'
            }
        }
    },
    server: {
        host: '0.0.0.0',//这里是服务器ip 写出0.0.0.就可以
        port: 8081,
        open: true, // 自动运行在浏览器中
        proxy: { //跨域代理

        }
    }
})

所用依赖版本

  "dependencies": {
    "vant": "^3.5.0",
    "vue": "^3.2.37"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.3",
    "@vitejs/plugin-vue-jsx": "^1.3.10",
    "@vue/compiler-sfc": "^3.0.4",
    "autoprefixer": "^10.4.7",
    "fast-glob": "^3.2.11",
    "postcss": "^8.4.14",
    "postcss-pxtorem": "^6.0.0",
    "sass": "^1.52.2",
    "vite": "^2.9.10",
    "vite-plugin-style-import": "^1.4.1",
    "vite-plugin-svg-icons": "^2.0.1"
  }