vite vue3 config配置篇

关于vite初始化项目参考自 https://vitejs.cn/
配置基于自生产上线项目所使用配置

vite.config.js

导入模块内容

import { defineConfig } from 'vite' #vite配置
import vue from '@vitejs/plugin-vue' #vue
import vueJsx from '@vitejs/plugin-vue-jsx' #支持jsx
import viteSvgIcons from 'vite-plugin-svg-icons' # svg
import { resolve } from "path"; # 引用项目地址
import OptimizationPersist from 'vite-plugin-optimize-persist' 
import PkgConfig from 'vite-plugin-package-config' #解决加载缓慢自动填充package.json
import legacy from '@vitejs/plugin-legacy' #浏览器兼容
import importToCDN from 'vite-plugin-cdn-import' # node_modules内容走CDN配置 缓解打包过大加载慢(服务器带宽不够)

配置alias

// search path
const pathResolve = (dir) => {
  return resolve(__dirname, ".", dir);
};

//set alias
const alias = [
  {
    find: '@',
    replacement: pathResolve("src")
  },
  {
    find: '~',
    replacement: pathResolve("./")
  },
  {
    find: "@build",
    replacement: pathResolve("build")}
];

defineConfig server

server:{
    https: false, //本地环境不用https
    hrm: true,
    port: 8080, //本地端口
    host: '0.0.0.0', 
    proxy: { //反向代理配置
      '/api': {
        target: 'http://localhost:8090/',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    },
  },

defineConfig plugins

添加项目中引用添加svg项 浏览器兼容问题 以及所需框架使用cdn加速(因服务器带宽有限不想打包时过大加载过慢问题)

plugins: [
    vue(),
    vueJsx(),
// 配置svg项 监听项目路径地址 并做icon替换
    viteSvgIcons({
      iconDirs: [resolve(process.cwd(), 'src/icons/svg')],
      symbol: 'icon-[dir]-[name]'
    }),
    PkgConfig(),
    OptimizationPersist(),
    legacy({
      targets: ['ie >= 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime']
    }),
    importToCDN({
      modules: [
        {
          name:'vue',
          var:'Vue',
          path:'https://npm.elemecdn.com/[email protected]/dist/vue.global.prod.js'
        },
        {
          name:'vuex',
          var:'Vuex',
          path:'https://npm.elemecdn.com/[email protected]/dist/vuex.global.prod.js'
        },
        {
          name:'vue-router',
          var:'VueRouter',
          path:'https://npm.elemecdn.com/[email protected]/dist/vue-router.global.prod.js'
        },
        {
          name: 'element-plus',
          var: 'ElementPlus',
          path: `https://npm.elemecdn.com/[email protected]/dist/index.full.min.js`,
          css: 'https://npm.elemecdn.com/[email protected]/dist/index.css',
        },
        {
          name: 'nprogress',
          var: 'NProgress',
          path: `https://npm.elemecdn.com/[email protected]/nprogress.js`,
          css: 'https://npm.elemecdn.com/[email protected]/nprogress.css',
        },
        {
          name: 'echarts',
          var: 'echarts',
          path: `https://npm.elemecdn.com/[email protected]/dist/echarts.min.js`
        }       
      ]
    })
  ],

defineConfig resolve

该内容配置@ 及~ 因为习惯于vue-cli 2.x时候import习惯@找文件并且不添加后缀 直接在配置项内添加后缀为.vue,.js以及.json文件

resolve: {
    alias,
    extensions: ['.vue', '.js', '.json']
  },

defineConfig build

build: {
    target: 'es2020',
    cssCodeSplit: false,
    minify: 'terser', // 混淆器,terser构建后文件体积更小
    sourcemap: false,
    terserOptions: {
      compress: {
        drop_console: true, // 生产环境移除console
        drop_debugger: true // 生产环境移除debugger
      }
    },
    rollupOptions: {
      treeshake: false,
      output: {
        manualChunks (id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString()
          }
        }
      }
    }
  },

完整配置内容

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import viteSvgIcons from 'vite-plugin-svg-icons'
import { resolve } from "path";
import OptimizationPersist from 'vite-plugin-optimize-persist'
import PkgConfig from 'vite-plugin-package-config'
import legacy from '@vitejs/plugin-legacy'
import importToCDN from 'vite-plugin-cdn-import'
// search path
const pathResolve = (dir) => {
  return resolve(__dirname, ".", dir);
};

//set alias
const alias = [
  {
    find: '@',
    replacement: pathResolve("src")
  },
  {
    find: '~',
    replacement: pathResolve("./")
  },
  {
    find: "@build",
    replacement: pathResolve("build")}
];


// https://vitejs.dev/config/
export default defineConfig({
  base: '/',
  server:{
    https: false,
    hrm: true,
    port: 8080,
    host: '0.0.0.0',
    proxy: {
      '/api': {
        target: 'http://localhost:8090/',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    },
  },
  plugins: [
    vue(),
    vueJsx(),
    viteSvgIcons({
      iconDirs: [resolve(process.cwd(), 'src/icons/svg')],
      symbol: 'icon-[dir]-[name]'
    }),
    PkgConfig(),
    OptimizationPersist(),
    legacy({
      targets: ['ie >= 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime']
    }),
    importToCDN({
      modules: [
        {
          name:'vue',
          var:'Vue',
          path:'https://npm.elemecdn.com/[email protected]/dist/vue.global.prod.js'
        },
        {
          name:'vuex',
          var:'Vuex',
          path:'https://npm.elemecdn.com/[email protected]/dist/vuex.global.prod.js'
        },
        {
          name:'vue-router',
          var:'VueRouter',
          path:'https://npm.elemecdn.com/[email protected]/dist/vue-router.global.prod.js'
        },
        {
          name: 'element-plus',
          var: 'ElementPlus',
          path: `https://npm.elemecdn.com/[email protected]/dist/index.full.min.js`,
          css: 'https://npm.elemecdn.com/[email protected]/dist/index.css',
        },
        {
          name: 'nprogress',
          var: 'NProgress',
          path: `https://npm.elemecdn.com/[email protected]/nprogress.js`,
          css: 'https://npm.elemecdn.com/[email protected]/nprogress.css',
        },
        {
          name: 'echarts',
          var: 'echarts',
          path: `https://npm.elemecdn.com/[email protected]/dist/echarts.min.js`
        }       
      ]
    })
  ],
  resolve: {
    alias,
    extensions: ['.vue', '.js', '.json']
  },
  css: {
    postcss: {
      plugins: [
        {
          postcssPlugin: 'internal:charset-removal',
          AtRule: {
            charset: (atRule) => {
              if (atRule.name === 'charset') {
                atRule.remove();
              }
            }
          }
        }
      ],
    },
  },
  build: {
    target: 'es2020',
    cssCodeSplit: false,
    minify: 'terser', // 混淆器,terser构建后文件体积更小
    sourcemap: false,
    terserOptions: {
      compress: {
        drop_console: true, // 生产环境移除console
        drop_debugger: true // 生产环境移除debugger
      }
    },
    rollupOptions: {
      treeshake: false,
      output: {
        manualChunks (id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString()
          }
        }
      }
    }
  },
})