配置文件

vite 配置

vue2 中配置文件是 vue.config.js,在vue3基于vite 开发时，使用vite.config.js 进行配置

vite.config.js

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
// 图片压缩 安装对应包：npm i vite-plugin-imagemin -D
import viteImagemin from 'vite-plugin-imagemin'

export default defineConfig({
  // 起个别名，在引用资源时，可以用‘@/资源路径’直接访问
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  plugins: [vue(), vueJsx(), // 图片压缩
  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
        }
      ]
    }
  })],
  // 配置前端服务地址和端口
  server: {
    // host:true,可以显示ip
    host: '0.0.0.0',
    port: 8991,
    // 是否开启 https
    https: false,
    // 设置反向代理，跨域
    proxy: {
      '/api1': {
        // 后台地址
        target: 'http://127.0.0.1:8990/',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      },
      '/api2': {
        // 后台地址
        target: 'http://127.0.0.1:8956/',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api2 /, '')
      }
    }
  },
})