vite学习指南

在Vite官网学习了一下，用法和配置整体来说和 Webpack 大同小异，只不过 Vite 更傻瓜式，现在简单总结一下认为常用的一些配置项，最近会在实际项目中实践，如果需要查看全部的配置请到vite官网查看。

root

这个属性是大家经常忽略的，有的朋友在用vite时见过这个报错

__dirname is not defined

其实改为process.cwd() 就不报错了

base

开发或生产环境服务的公共基础路径。可以是以下几种值：

• 绝对 URL 路径，例如 /foo/。
• 完整的 URL，例如 https://oss.om/​。//如果是上传静态文件至oss的话需要根据多环境配置不同路径
• 空字符串或 ./（用于嵌入形式的开发）。

build

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    outDir: 'dist', // 打包文件的输出目录 默认dist 相对于 项目根目录
    assetsDir: 'assets', // 静态资源的存放目录 默认assets  相对于 build.outDir
    assetsInlineLimit: 4096 // （4kb）图片转 base64 编码的阈值
// 如果你指定了 build.lib，那么 build.assetsInlineLimit 将被忽略，无论文件大小，资源都会被内联。
  },
})

//如用的vue2+vite 这时需要安装vite-plugin-vue2来支持vue2

import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'
export default defineConfig({
  plugins: [ createVuePlugin() ],
})

import { defineConfig } from 'vite'
export default defineConfig({
    server: {
      port: 3000,//指定开发服务器端口。注意：如果端口已经被使用，Vite 会自动尝试下一个可用的端口，所以这可能不是开发服务器最终监听的实际端口。
      host: true,  //指定服务器应该监听哪个 IP 地址。 如果将此设置为 0.0.0.0 或者 true 将监听所有地址，包括局域网和公网地址
      open: true, //是否自动打开浏览器
      proxy: {  //代理
        // 字符串简写写法
        //'/foo': 'http://localhost:4567',
        '/api': {
          target: 'http:/baidu.com',
          changeOrigin: true,
          rewrite: (p) => p.replace(/^\/api/, '')
        }
      }
    },
  }
})

css

import { defineConfig } from 'vite'
import postcssPxToViewport from 'postcss-px-to-viewport'

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `$injectedColor: orange;` // 全局变量
        additionalData: `@import '/src/assets/styles/variables.scss';` // 引入全局变量文件
      }
    },
    postcss: {
      plugins: [
        // viewport 布局适配
        postcssPxToViewport({
          viewportWidth: 375
        })
      ]
    }
  }
})

resolve

定义路径别名也是我们常用的一个功能，我们通常会给 scr 定义一个路径别名：

import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(process.cwd(), './src') // 路径别名
    },
    extensions: ['.js', '.ts', '.json', '.vue', ] // 导入时想要省略的扩展名列表
  }
})