vite的基础配置

该配置是包含了打包配置，根目录设置，静态文件别名设置，打包环境去掉console.log 组件按需引入，配置mock，以及使用，跨域，按需引入，gzip压缩

线上

1.vite打包路径，打包之前是绝对定位，打包之后是相对路由，在vite.config里面配置base:”./“，如果不配置的话本地访问不到

base:"./"

设置根目录

使用必须先下载node的声明文件
yarn add --dev @types/node
import { resolve } from "path";
resolve: {
    //设置别名
    alias: {
      "@": resolve(__dirname, 'src')
    }
  },

静态资源设置别名 “/icon”: “./src/assets”,

打包环境去掉打印console.log

1.先安装  npm i terser --legacy--peer-deps
2.然后配置打包配置

组件库按需引入

打包前是800多kb,打包后是100多

1.npm install -D unplugin-vue-components unplugin-auto-import
2.在vite.config.引入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
3.AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),

安装mock

1.简介

1.安装

yarn add mockjs vite-plugin-mock@2.9.6 -D

2.vite.config.ts中

import { viteMockServe } from "vite-plugin-mock";
viteMockServe({
      // default
      mockPath: "mock",
    }),

3.创建文件mock mock文件夹一定要放在src外面

// test.ts

import { MockMethod } from "vite-plugin-mock";
import { mock } from "mockjs";
var data = mock({
  "list|100": [
    {
      goods: "小米",
      price: 3000,
    },
  ],
});
export default [
  {
    url: "/api/get",
    method: "get",
    response: ({ query }) => {
      return {
        code: 0,
        data,
      };
    },
  },
] as MockMethod[];

4.组件中使用

import axios from "axios";
async function fn() {
  const { data } = await axios.get("/api/get");
  console.log(data);
}
fn();

跨域vite.config.ts中

server: {
   // 配置服务器代理，实现跨域
   proxy: {
     //所有以 '/api'为前缀的接口都转向http://localhost:8000
     //  // http://127.0.0.1:5173/api/user
     //  // http://localhost:8000/api/user
     //  // http://localhost:8000/user
     "/api": {
       target: "http://localhost:8000",
       changeOrigin: true,
       //去掉接口中的 '/api'以便和后端接口匹配
       rewrite: (path) => path.replace(/^\/api/, ""),
     },
   },
 },

env环境变量

1.定义两个文件夹
.env.development  //生产阶段
VITE_BASE_API=/api/get  //线下接口数据
.env.production   //线上
VITE_BASE_API=www.baidu.com  //线上接口数据

使用cdn按需引入

1.安装
npm install vite-plugin-cdn-import --save-dev
2.安装
$ npm install element-plus --save
3.vite.config.ts中引入
import { autoComplete, Plugin as importToCDN } from "vite-plugin-cdn-import";
 importToCDN({
      modules: [
        {
          name: "vue",
          var: "Vue",
          path: `https://unpkg.com/vue@next`,
        },
        {
          name: "element-plus",
          var: "ElementPlus",
          path: `https://unpkg.com/element-plus`,
          css: "https://unpkg.com/element-plus/dist/index.css",
        },
      ],
    }),

没使用之前

使用后

压缩代码gzip

1.安装

npm i vite-plugin-compression -D

2.引入

import viteCompression from "vite-plugin-compression";

3.配置

viteCompression(),