1.安装

npm i vconsole vite-plugin-vconsole

2.我的vite.config.js 中所有配置

import { resolve } from 'path'
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import legacy from '@vitejs/plugin-legacy'

import { viteVConsole } from 'vite-plugin-vconsole'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  // const isBuild = command === 'build';
  const viteVConsoleConfig = {
    entry: resolve('src/main.js'),
    localEnabled: mode !== 'production',
    enabled: mode !== 'production',
    config: {
      maxLogNumber: 1000,
      theme: 'dark'
    }
  }

  const plugins = [
    vue(),
    vueJsx(),
    legacy(),
    viteVConsole(viteVConsoleConfig),
  ]
  //env环境配置
  const { VITE_APP_BASE_URL } = loadEnv(mode, './env')
  return {
    envDir: 'env',
    plugins,
    resolve: {
      alias: [
        {
          find: '@',
          replacement: resolve(__dirname, './src')
        },
        {
          find: '~',
          replacement: resolve(__dirname, './types')
        }
      ]
    },
    server: {
      headers: {
        'Access-Control-Allow-Origin': '*' // NOSONAR
      },
      open: false,
      port: 8001,
      host: '0.0.0.0',
      proxy: {
        '/basic-api': {
          target: VITE_APP_BASE_URL,
          changeOrigin: true,
          // 允许跨域
          secure: false,
          rewrite: (path) => path.replace(/^\/basic-api/, '')
        },
        // mock.apifox.com
        '/mock-api': {
          target: 'https://mock.apipark.cn',
          changeOrigin: true,
          // 允许跨域
          secure: false,
          rewrite: (path) => path.replace(/^\/mock-api/, '')
        }
      },
      build: {
        target: 'es2015',
        minify: 'terser',
        brotliSize: false,
        chunkSizeWarningLimit: 1200,
        assetsDir: 'static',
        terserOptions: {
          compress: {
            // warnings: false,
            drop_console: mode === 'prod', // 打包时删除console
            drop_debugger: true, // 打包时删除 debugger
            pure_funcs: ['console.log']
          },
          output: {
            comments: true // 去掉注释内容
          }
        }
      }
    }
  }
})



Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐