vue3.2 之 vite的相关配置

vue3.2 之 vite的相关配置

vite官网

1：vite之配置基础路径 vite.config.ts

• base
  • 默认base：“/”
  • 修改为 base：“./” 相对路径

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  base: './', //相对路径
  plugins: [vue()]
})

• npm run dev
  

• 生产效果 （ npm run preview -> 预览效果 等同于本地起一个服务器）
  

2：vite之配置别名 vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  base: './', //相对路径
  plugins: [vue()],
  resolve: {
    //设置路径别名
    alias: {
      '@': resolve(__dirname, 'src'),
      '*': resolve('')
    }
  }
})

• 使用别名
  • import Test from '@/components/Test.vue'
• npm run dev | build效果 （ 一致 ）
  

3：vite之配置生产去掉log等 vite.config.ts

• build
  • yarn add terser -D

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    }
  }
})

• npm run dev
  

• npm run build （ 后 预览生产效果 npm run preview 也可以在package.json点击一下指令）
  

4：vite之配置 ele-plus自动引入 vite.config.ts

• 安装东西
  • yarn add -D unplugin-vue-components unplugin-auto-import
  • jsx yarn add @vitejs/plugin-vue-jsx
• 1：vite.config.ts配置

import vueJsx from '@vitejs/plugin-vue-jsx'
// 引入 自动化引入插件
import AutoImport from 'unplugin-auto-import/vite'
// 配合上方 实现ele-plus按需引入
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    AutoImport({
      imports: ['vue'],
      dts: 'src/auto-import.d.ts'
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ],
})

• 2：新增提示tsconfig.json

"compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }

• 3：使用组件

 <el-button type="primary">Primary</el-button>

5：vite之配置 mock数据 vite.config.ts

• 安装
  • yarn add vite-plugin-mock mockjs -D
  • yarn add axios
• 1：配置 vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// mock
import { viteMockServe } from 'vite-plugin-mock'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    viteMockServe({
      mockPath: 'mock',
      // localEnabled: command === 'serve'
    })
  ],
})

• 2：mock / index.ts

import { MockMethod } from 'vite-plugin-mock'
// import { mock } from 'mockjs'

const arr: any = []
for (let index = 0; index < 20; index++) {
  arr.push({
    customer_name: 'wade',
    status_text: '登录成功',
    os: 'Windows 10',
    browser: 'Chrome(99.0.4844.51)',
    ip: '192.168.9.110',
    created: '2021-12-14 10:41:02',
    location: '局域网 局域网'
  })
}

const logList = {
  total: 31,
  page: 1,
  page_size: 20,
  list: arr
}

const statusList = {
  data: [
    { label: '全部', value: 0 },
    { label: '待审核', value: 1 }
  ]
}

export default [
  {
    url: '/mock/api/getList',
    method: 'post',
    response: () => {
      return logList
    }
  },
  {
    url: '/mock/api/getStatusList',
    method: 'get',
    response: () => {
      return statusList
    }
  }
] as MockMethod[]

• 3：使用

import axios from 'axios'

axios.get('/mock/api/getStatusList').then((res:any) => {
  console.log('res', res.data.data)
})

6：vite之配置 proxy配置 vite.config.ts

• 1：vite.config.ts

  server: {
    proxy: {
      // 使用 proxy 实例
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }

7：vite之配置 env环境变量配置

• src / .env.development

# just a flag
ENV = 'development'

# base api 生产环境的 基础路径
VITE_BASE_API = 'https://www.fqniu.xyz:6000'

• src / .env.production

# just a flag
ENV = 'production'

# base api 生产环境的 基础路径
VITE_BASE_API = 'https://www.fqniu.xyz:6002'

• 拿到环境变量 import.meta.env.VITE_BASE_API
• npm run dev效果
  • 
• npm run build 预览效果
  • 

8：vite之配置 代码压缩

• 安装
  • vite-plugin-compression -D

import viteCompression from 'vite-plugin-compression';

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

• 效果
  
  

9：vite之配置 图片压缩

• 安装：yarn add vite-plugin-imagemin -D | 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,
            },
          ],
        },
      }),
    ],
  }
}