vue开发环境配置

import { defineConfig,loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'path';

import viteCompression from 'vite-plugin-compression'


// 按需引入elemnt-plus
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { visualizer } from 'rollup-plugin-visualizer';

export default ({ mode }) => {
  console.log('环境变量------', loadEnv(mode, process.cwd()) )
  return defineConfig({
  // 配置打包路径
  base: '/',
  plugins: [
    vue(),
    // 按需引入element-plus
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    }), 
    //生成压缩包gz
    viteCompression({
      verbose: true,
      disable: false,
      threshold: 10240,
      algorithm: 'gzip',
      ext: '.gz'
    }),
    visualizer()
  ],
  resolve: {
    // 配置 @ 指向 src目录
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  // 引入全局scss文件
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "@/assets/css/main.scss";',
        charset: false,
      },
    },
  },
  build: {  
    minify: false,
    chunkSizeWarningLimit: 1500,
    terserOptions: {  
      compress: {
        //生产环境时移除console
        drop_console: true,
        drop_debugger: true,
      },
    },
    // 取消计算文件大小,加快打包速度
    brotliSize: false,
    sourcemap: true,
    assetsDir: 'static/img',
    rollupOptions: {
      // external: ['vue','element-plus'],
      output: {
        chunkFileNames: 'js/[name]-[hash].js',
        entryFileNames: 'js/[name]-[hash].js',
        assetFileNames: '[ext]/[name]-[hash].[ext]',
        manualChunks(id){
          if(id.includes('node_modules')){
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        },
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        // globals: {
        //   vue: 'Vue',
        //   'element-plus': 'elementPlus'
        // }
      },
    },
  },
  // 服务器配置
  server: {
    // 端口号
    port: 8889,
    host: '0.0.0.0',
    // 自动打开浏览器
    // open: true,
    // 允许跨域
    cors: true,
    hmr: true,
    proxy: {
      '/api': {
        // target: 'https://ruchangsz.com:44444/',
        // target: 'http://120.77.63.18:44444/',
        // 测试地址
        // target: 'http://120.77.19.84/gs',
        target: loadEnv(mode, process.cwd()).VITE_BASE_API,
        changeOrigin: true,
        ws: true,
        rewrite: (path) => {
          return path.replace('/api', '')
        }
      },
    },
  },
})
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值