1、静态资源

base

export default defineConfig({
  base:'./',   //配置相对路径 
  plugins: [vue()]
})

alias

export default defineConfig({
  base: "./", //配置相对路径
  plugins: [vue()],
  resolve: {
    alias: {
      comp: resolve(__dirname, "src/components/about/index"), //组件别名
      "/icon": "./src/assets/image/icon" //静态资源 图片
    },
  },
});

使用

<script setup lang="ts">
import Al from "comp/HelloWorld.vue";
</script>
<template>
  <!-- <img alt="Vue logo" src="./assets/image/icon/logo.png" />
  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" /> -->
  <img src="/icon/logo.png" />
  <Al msg="Hello Vue 3 + TypeScript + Vite" />
</template>

生产环境移除console.log的配置

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

mock数据配置

-安装
npm i vite-plugin-mock mockjs

-使用
新建mock.js
//demo
import { MockMethod } from "vite-plugin-mock";
import { mock } from "mockjs";
const data = mock({
    'list|99': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1,
        'name':'@cname',
        'avatar':'@image'
    }]
});
export default [
  {
    url: "/api/get",
    method: "get",
    response: ({ query }) => {
      return {
        code: 0,
        data: data
      };
    },
  },
] as MockMethod[];
页面请求
import axios from 'axios';
async function fn(){
  const {data} = await axios.get('/api/get');
  console.log(data.data.list);
}
fn()