1.base 配置打包路径，或者开发路径
base: './',

2.alias 别名配置

import { resolve } from 'path';
export default defineConfig({
 ...
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'), // 设置 `@` 指向 `src` 目录
    },
  },
 ...
)}

3.build 打包配置

export default defineConfig({
     ...
     build: {
        minify: 'terser',
        terserOptions: {
             compress: {
             // 生产环境时移除console
             drop_console: true,
             drop_debugger: true,
            },
        },
    },
     ...     
)}

4.rollupOptions打包输出文件夹

export default defineConfig({
     ...
     build: {
        rollupOptions: {
            output: {
                chunkFileNames: 'js/[name]-[hash].js',
                entryFileNames: 'js/[name]-[hash].js',
                assetFileNames: '[ext]/[name]-[hash].[ext]',
      },
    },
     ...     
)}

5.mock 配置
npm i vite-plugin-mock mockjs -D

//vite.js
import { viteMockServe } from 'vite-plugin-mock';
...
plugins: [
    viteMockServe({
      // default
      mockPath: 'mock',
    })]
...

//useage
//mock/index.ts
import { MockMethod } from 'vite-plugin-mock';
import { mock, Random } from 'mockjs';

const dataX = mock({
  // 属性 list 的值是一个数组，其中含有 1 到 100 个元素
  'list|1-10': [{
    // 属性 id 是一个自增数，起始值为 1，每次增 1
    'id|+1': () => Random.cname(),
  }],
});

export default [
  {
    url: '/api/get',
    method: 'get',
    response: ({ query }) => ({
      code: 0,
      data: dataX,
    }),
  },
  {
    url: '/api/post',
    method: 'post',
    timeout: 2000,
    response: {
      code: 0,
      data: {
        name: 'vben',
      },
    },
  },
  {
    url: '/api/text',
    method: 'post',
    rawResponse: async (req, res) => {
      let reqbody = '';
      await new Promise((resolve) => {
        req.on('data', (chunk) => {
          reqbody += chunk;
        });
        req.on('end', () => resolve(undefined));
      });
      res.setHeader('Content-Type', 'text/plain');
      res.statusCode = 200;
      res.end(`hello, ${reqbody}`);
    },
  },
] as MockMethod[];

6.server跨域代理
官方写法

 //vite.config.ts
  server: {
    port: 4500, // 设置服务启动端口号
    open: true, // 设置服务启动时是否自动打开浏览器
    cors: true, // 允许跨域
    proxy: {
      '/api': {
        target: 'http://localhost:8888/',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }

//App.vue
const content = ref<string>('')
axios   //注意这里不是封装后的axios
.get('api/test')               //这里的api会被vite设置的proxy里面配置的target替换
.then((res: AxiosResponse<string>) => {
  console.log(res)
  content.value = res.data
})
.catch((err) => {
  console.log(err)
})

7.环境变量配置.env.production

//.env.development
VITE_BASE_API=https://www.xxx.com

//.env.production
VITE_BASE_API=/api

获取开发环境变量环境变量

console.log(import.meta.env.VITE_BASE_API);  //https://www.xxx.com

8.cdn引入element-plus
npm install vite-plugin-cdn-import --save-dev
pnpm i element-plus -D

import importToCDN from 'vite-plugin-cdn-import'
export default {
    plugins: [
        importToCDN({
            modules: [
                {
                    name: 'vue',
                    var: 'vue',
                    path: `https://unpkg.com/vue@next`,
                },
                {
                    name: 'element-plus',
                    var: 'ElementPlus',
                    path: `//unpkg.com/element-plus`,
                    css:"//unpkg.com/element-plus/dist/index.css"
                },
            ],
        }),
    ],
}

使用：

import ElementPlus from 'element-plus';
const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

优点：
有tree-shaking所以打包体积并不会变大
第一次打开时速度较快

9.gzip代码压缩
npm i vite-plugin-compression -D

import viteCompression from 'vite-plugin-compression';

export default () => {
  return {
    plugins: [viteCompression()],
  };
};

效果

10.打包图片
需要使用cnpm 安装不然装不上
cnpm i vite-plugin-imagemin -D

import viteImagemin from 'vite-plugin-imagemin'

export default () => {
  return {
    plugins: [
      viteImagemin({
        gifsicle: {
          optimizationLevel: 7,
          interlaced: false,
        },
        optipng: {
          optimizationLevel: 7,
        },
        mozjpeg: {
          quality: 20,
        },
        pngquant: {
          quality: [0.8, 0.9],
          speed: 4,
        },
        svgo: {
          plugins: [
            {
              name: 'removeViewBox',
            },
            {
              name: 'removeEmptyAttrs',
              active: false,
            },
          ],
        },
      }),
    ],
  }
}

11.代码格式化
npm i eslint prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/eslint-config-prettier @vue/eslint-config-typescript babel-eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue -D

//.eslinc.js
module.exports = {
    root: true,
    env: {
        browser: true,
        node: true,
        es6: true,
    },
    extends: [
        'plugin:vue/vue3-essential',
        'eslint:recommended',
        '@vue/typescript/recommended',
        '@vue/prettier',
        // '@vue/prettier/@typescript-eslint',
    ],
    parserOptions: {
        ecmaVersion: 2020,
        sourceType: 'module',
    },
    rules: {
        'prettier/prettier': 'error',
        '@typescript-eslint/no-explicit-any': ['off'],
        '@typescript-eslint/indent': ['off'],
        '@typescript-eslint/no-unused-vars': ['error'],
    },
    globals: {
        defineProps: 'readonly',
        defineEmits: 'readonly',
        defineComponent: 'readonly',
        defineExpose: 'readonly',
    },
}

//prettierrc.js
module.exports = {
    printWidth: 80,
    tabWidth: 4,
    useTabs: false,
    singleQuote: true,
    semi: false,
    trailingComma: 'es5',
    bracketSpacing: true,
    jsxBracketSameLine: false,
    arrowParens: 'avoid',
    endOfLine: 'auto',
}

12.vscode插件共享
在.vscode/extensitions.json文件中添加用户所需的vscode插件的名称
还可以新建settings.json然后把本地的vscode的setting 配置放进去

这样的话其他人参与你的开发的时候就不会出现代码格式混乱的局面

更多方法：查看vite官方文档
或者参考他人项目
1.github上找插件 vite-plugin