v3 vite.config.js常用基本配置项

最新推荐文章于 2024-05-28 08:50:04 发布

W_Yin

最新推荐文章于 2024-05-28 08:50:04 发布

阅读量565

点赞数

分类专栏： vite 文章标签： javascript 前端

本文链接：https://blog.csdn.net/W_Yin/article/details/126115612

版权

vite 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

 import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
/* path模块是node.js的内置模块     不支持ts若使用->npm install @types/node -D */
import { resolve } from 'path';
/*还需amfe-flexible   在main中直接引入即可*/
import postCssPxToRem from "postcss-pxtorem";  //npm i postcss-pxtorem -D
export default defineConfig({
  base: "./", 
  plugins: [vue()],
  resolve: {
    alias: {
    /*定义全局路径*/
      '@': resolve(__dirname, './src'),
      '^': resolve(__dirname, './src/views'),
      '#': resolve(__dirname, './src/components')
    }
  },
  css: {
    postcss: {
      plugins: [
      /*适配rem  也可在根目录创建postcss.config.js配置  详见:*/
        postCssPxToRem({
          rootValue: 75,  //1rem大小  px转rem的算法是，设计稿量的值/设计稿的宽度=rem的值
          propList: ['*'],  //需要转换的属性
          mediaQuery: true,  //允许在媒体查询中生效
        })
      ]
    },
    preprocessorOptions: {
      stylus: {
      /*vite  根据官档  @import 引入stylus不生效 需要通过绝对路径导入 */
        imports: [resolve(__dirname, 'src/stylus/...styl')]  //配置全局变量
      }
    }
  },
  build: {
    minify: 'terser',   //v3 terser 是可选依赖项  需安装 npm i terser 
    terserOptions: {
      compress: {
        //生产环境时移除console
        drop_console: true,
        drop_debugger: true,
      },
    },
    rollupOptions: {
    /*输出文件路径*/
      output: {
        entryFileNames: 'static/js/[name]-[hash].js',
        chunkFileNames: 'static/js/[name]-[hash].js',
        /*静态资源筛选*/
        assetFileNames: assetInfo => {
          var info = assetInfo.name.split('.')
          var extType = info[info.length - 1]
          if (/\.(png|jpe?g|gif|svg)(\?.*)?$/.test(assetInfo.name)) {
            extType = 'img'
          } else if (/\.(woff2?|eot|ttf|otf)(\?.*)?$/i.test(assetInfo.name)) {
            extType = 'fonts'
          }
          return `static/${extType}/[name]-[hash][extname]`
        },
      }
    }
  },
})