【vue3】 setup vite.config.js通用配置,反向代理、打包配置、生产环境去除console.log以及debug输出

vite.config.js通用配置如下

// Plugins
import vue from '@vitejs/plugin-vue'
import vuetify, {
    
    transformAssetUrls} from 'vite-plugin-vuetify'
import {
    
    fileURLToPath, URL} from 'node:url'
// Utilities
import {
    
    defineConfig} from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
    
    
  build:{
    
    
    outDir: 'dist',   // 指定打包路径,默认为项目根目录下的 dist 目录
    minify: "terser", // 必须开启:使用terserOptions才有效果
    terserOptions: {
    
    
      compress: {
    
    
        keep_infinity: true,  // 防止 Infinity 被压缩成 1/0,这可能会导致 Chrome 上的性能问题
        drop_console: true,   // 生产环境去除 console
        drop_debugger: true   // 生产环境去除 debugger
      },
    },
    chunkSizeWarningLimit: 1500   // chunk 大小警告的限制(以 kbs 为单位)
  },
  plugins: [
    vue({
    
    
      template: {
    
    transformAssetUrls}
    }),
    // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
    vuetify({
    
    
      autoImport: true,
      styles: {
    
    
        configFile: 'src/styles/settings.scss',
      },
    }),
  ],
  define: {
    
    'process.env': {
    
    }},
  resolve: {
    
    
    alias: {
    
    
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
    extensions: [
      '.js',
      '.json',
      '.jsx',
      '.mjs',
      '.ts',
      '.tsx',
      '.vue',
    ],
  },
  server: {
    
    
    port: 3000,
    open: true,//服务启动时自动在浏览器中打开应用
    // http://localhost:3030/api/user的请求都会变成 http://localhost:8080/user
    proxy: {
    
    
      '/api': {
    
    
        target: 'http://localhost:8080',
        ws: true,
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      }
    },
  },
})


用于个人学习保存,以便重复阅读。

也希望能帮到您!

猜你喜欢

转载自blog.csdn.net/qq_43813351/article/details/129381169
今日推荐