vite基本配置

vite.config.js基本配置

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
// 自动导入vue中hook reactive ref等
import AutoImport from 'unplugin-auto-import/vite'

//自动导入ui-组件 比如说ant-design-vue  element-plus等
// import Components from 'unplugin-vue-components/vite'
// import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// 引入的依赖，生产环境转cdn
// 动态路由，导入包转cdn可以加快vite打包速度
import { autoComplete, Plugin as importToCDN } from 'vite-plugin-cdn-import'
import eslintPlugin from 'vite-plugin-eslint'
// 查看导入包的大小分析视图
import { visualizer } from 'rollup-plugin-visualizer'

// 动态路由
import Pages from 'vite-plugin-pages'

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd())
  // .env文件中的环境变量必须以VITE_为前缀，否则无法引用成功
  const { VITE_APP_ENV } = env
  return {
    // base: VITE_APP_ENV === 'index' ? '/' : '/',
    plugins: [
      vue(),
      Pages({
        dirs: 'src/views', // 需要生成路由的文件目录
        exclude: ['**/components/*.vue'] // 排除在外的目录，即不将所有 components 目录下的 .vue 文件生成路由
      }),
      eslintPlugin({
        include: ['src/**/*.ts', 'src/**/*.js', 'src/**/*.vue', 'src/*.ts', 'src/*.js', 'src/*.vue']
      }),
      // 自动导入vue，vue-router
      AutoImport({
        imports: ['vue', 'vue-router'],
        dts: 'src/auto-import.d.ts',
        eslintrc: {
          enabled: true
        }
      }),
      // Components({
      //   resolvers: [ElementPlusResolver()]
      // }),
      visualizer({
        emitFile: false,
        file: 'stats.html', // 分析图生成的文件名
        open: false // 如果存在本地服务端口，将在打包后自动展示
      }),
      // 打包时导入的包装cdn
      importToCDN({
        prodUrl: 'https://unpkg.com/{name}@{version}/{path}', // https://unpkg.com/
        modules: [
          autoComplete('vue'),
          autoComplete('axios'),
          autoComplete('lodash'),
          {
            name: 'vuex',
            var: 'Vuex',
            path: 'https://cdnjs.cloudflare.com/ajax/libs/vuex/4.1.0/vuex.global.prod.min.js'
          },
          {
            name: 'vue-router',
            var: 'VueRouter',
            path: 'https://cdnjs.cloudflare.com/ajax/libs/vue-router/4.2.2/vue-router.global.prod.min.js'
          },
          {
            name: 'echarts',
            var: 'echarts',
            path: 'dist/echarts.js'
          },
          {
            name: 'element-plus',
            var: 'ElementPlus',
            path: 'dist/index.full.js',
            css: 'dist/index.css'
          },
          {
            name: '@element-plus/icons-vue',
            var: 'ElementPlusIcons',
            path: 'dist/index.iife.min.js'
          }
          // {
          //   name: 'dayjs',
          //   var: 'dayjs',
          //   path: 'dist/dayjs.min.js'
          // }
        ]
      })
    ],
    build: {
      minify: 'terser',
      terserOptions: {
        compress: {
          //生产环境时移除console
          drop_console: true,
          drop_debugger: true
        }
      }
    },
    resolve: {
      // 配置路径别名
      alias: {
        '@': resolve(__dirname, 'src')
      },
      // 省略文件后缀
      extensions: ['', '.js', '.json', '.vue', '.scss', '.css']
    },
    server: {
      port: 8880, // 端口配置
      open: true, //服务启动时自动在浏览器中打开应用
      //自定义代理规则
      // proxy: {
      //   "/api": {
      //     target: "https://www.baidu..com",
      //     changeOrigin: true,
      //     rewrite: (path) => path.replace(/^\/api/, ""),
      //   },
      // }
    }
  }
})