写给自己看的vite配置

最后更新时间：2023年06月09日

几年前学习webpack时写过一篇文章，但是在几年后的今天，webpack也许不再适合一些大型的项目了，vite成为了更好的选择，有兴趣可以对别一下几年前的文章，vite的配置简单了许多.传送门

开始准备

  • mkdir vite-test
  • cd vite-test
  • npm i vite -D

此时我们创建好了vite项目的文件夹，并且使用npm安装好了vite，目录生成了node_modules和package.json还有package-lock.json文件夹，npm项目安装完成.

配置vite

  • 在根目录中新建index.html和vite.config.js两个文件，vite.config.js相当于vue-cli创建的项目中的

vue.config.js

  • 接下来先将html配置好.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <!-- script`标签中的type="module"是告诉浏览器main.js是一个ES6模块，并且使用import和export语句来导入和导出模块. -->
    <script src='./main.js'></script>
</head>
<body>
    <div>这是一个vite项目</div>
</body>
</html>

main.js

创建一个空的main.js文件

vite.config.js

// 先将vite.config.js留空

packge.json

 //添加启动与打包命令
 "scripts": {
    "dev": "vite",
    "build": "vite build"
  }

此时使用npm run dev命令运行该项目,启动成功后默认为5173端口，打开http://localhost:5173/显示html的内容，尝试修改下index.html自动热更新，不同于webpack需要配置热更新，vite默认开启热更新.

css配置

vite 同时提供了对 .scss，.sass，.less，.styl 和 .stylus 文件的内置支持，只需安装相应的预处理器就可以了. 

# .less
npm install less -D

# .scss and .sass
npm install sass -D

# .styl and .stylus
npm install stylus -D

选择你常用的css预处理器安装，根目录新建一个css文件，我用的是scss，在main.js中引入scss文件 

import './index.scss'

此时浏览器可能会开始报错Uncaught SyntaxError: Cannot use import statement outside a module，这个错误通常出现在代码中使用了ES6的模块语法，但是浏览器并不支持它。要解决这个问题，可以将代码转换为CommonJS或其他浏览器支持的模块语法，我们需要将代码打包成浏览器可用的格式，不同于webpack需要添加一大堆的babel，在vite.config.js中我们只需要这样配置: 

esm: 'babel'

可能这样配置还是不行，为什么呢？因为我们在index.html中引入了main.js，而main.js中使用了import来引入index.scss文件，所以我们还需要在index.html中的script标签中添加type="module"来告诉浏览器这是一个ES6模块.

PostCSS

PostCSS是一个基于Node.js的CSS处理工具，可以用它来自动化处理CSS。它可以通过编写插件来扩展功能，支持使用JavaScript编写CSS，支持使用CSS未来的语法，如CSS Variables、CSS Grid等。PostCSS的主要功能是将CSS转换为更加兼容的CSS，例如自动添加浏览器前缀、压缩CSS等。它也可以用于优化CSS性能，例如减小CSS文件大小、合并CSS文件等。PostCSS已经成为了现代前端开发中不可或缺的工具之一，这里我介绍两个常用的PostCSS插件.

postcss-preset-env
  • postcss-preset-env是一个预设环境插件，包含高级 CSS 语法的降级、前缀补全等众多功能. 
npm i postcss-preset-env -D

在vite.config.js中配置 

import  postcssPresetEnv from 'postcss-preset-env'
css: {
        postcss: {
          plugins: [postcssPresetEnv()]
        }
      }

随便在index.scss中写几个css样式，再查看网页的样式，你会发现，就算你没写css的浏览器兼容样式，css也会自动加上.

postcss-px-to-viewport
  • postcss-px-to-viewport一个对移动端不同设备进行布局适配的插件. 
npm install postcss-px-to-viewport -D

配置vite.config.js，将我们书写的 px 单位转为 vw 或 vh ，轻松地解决了适配问题. 

postcss: {
          plugins: [postcssPresetEnv(),postcssPxToViewport({
            viewportWidth: 375
          })]
        }

scss配置

vite中配置SCSS预处理器的选项，其中additionalData是一个字符串，它会被添加到每个SCSS文件的顶部。这个字符串中使用了@use语法来导入一个名为index.scss的文件，as *表示将这个文件中的所有变量和函数都导入到当前文件的命名空间中。这个配置的作用是让每个SCSS文件都可以使用index.scss中定义的变量和函数，这样可以避免在每个SCSS文件中重复定义相同的变量和函数，提高了代码的复用性和可维护性，在一些主题配置中会经常使用到，例如更普遍的暗黑模式. 

css:{
scss: {
additionalData: @use '@/theme/index.scss' as * ;
}
}
// @我们还没配置，可以先使用相对路径替换项目中的文件路径

vue

vite中使用vue单文件，只需要安装一些相应的插件并且配置即可.

安装@vitejs/plugin-vue 

npm i @vitejs/plugin-vue -D
plugins: [vue()]

ts

vite 仅执行 .ts 文件的转译工作，不会执行任何类型检查。编辑器提示报错，也不会影响正常开发和生成环境打包,这样对我们的代码规范影响很大，所以我们需要通过下面两个插件进行约束: 

# 安装typescript依赖
npm install typescript -D
# ts检查
npm install vite-plugin-checker -D

在vite.config.js中配置 

plugins: [vue(),checker({
    typescript: true
})]

接下来我们在根目录下创建tsconfig.json，同时再创建tsconfig.base.json

tsconfig.json配置: 

{
  "extends": "./tsconfig.base.json", // 检查规则延申文件
  "compilerOptions": { // 配置引用别名
    "paths": {
      "@/*": ["src/*"],
      "~/*": ["typings/*"]
    }
  },
  "include": ["src", "typings", "auto-imports.d.ts"],// 检查目录
  "exclude": ["node_modules", "**/dist"] // 排除检查目录
}

tsconfig.base.json按需进行配置即可

{
  "files": [],
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    //  启用所有严格类型检查选项。
    //启用 --strict相当于启用 --noImplicitAny, --noImplicitThis, --alwaysStrict， --strictNullChecks和 --strictFunctionTypes和--strictPropertyInitialization。
    "strict": true,
    // 允许编译器编译JS，JSX文件
    "allowJs": false,
    // 允许在JS文件中报错，通常与allowJS一起使用
    "checkJs": false,
    // 允许使用jsx
    "jsx": "preserve",
    "declaration": true,
    //移除注解
    "removeComments": true,
    //不可以忽略any
    "noImplicitAny": false,
    //关闭 this 类型注解提示
    "noImplicitThis": true,
    //null/undefined不能作为其他类型的子类型：
    //let a: number = null; //这里会报错.
    "strictNullChecks": true,
    //生成枚举的映射代码
    "preserveConstEnums": true,
    //根目录
    //输出目录
    "outDir": "./ts-out-dir",
    //是否输出src2.js.map文件
    "sourceMap": true,
    //变量定义了但是未使用
    "noUnusedLocals": false,
    //是否允许把json文件当做模块进行解析
    "resolveJsonModule": true,
    //和noUnusedLocals一样，针对func
    "noUnusedParameters": false,
    // 模块解析策略，ts默认用node的解析策略，即相对的方式导入
    "moduleResolution": "node",
    //允许export=导出，由import from 导入
    "esModuleInterop": true,
    //忽略所有的声明文件（ *.d.ts）的类型检查。
    "skipLibCheck": true,
    "baseUrl": ".",
    //指定默认读取的目录
    //"typeRoots": ["./node_modules/@types/", "./types"],
    "lib": ["ES2018", "DOM"]
  }
}

这样配置完成之后，如果有ts的错误，将会在页面进行显示并且指出错误的行数与错误原因.

环境变量

vite的环境变量和webpack的配置其实大差不差，只是获取环境变量的方法有一些变化. 根目录中创建几个.env文件，例如.env.dev和.env.bulid文件，分别在.env.dev和.env.bulid中添加VITE_APP_ENV = 'dev'和VITE_APP_ENV = 'build'，区分开发和生成环境. 再修改packge.json中的script启动命令即可.

"scripts": {
    "dev": "vite --mode dev",
    "build": "vite build --mode build"
  }

使用起来也非法的简单，只需要使用import.meta.env.VITE_APP_ENV即可获取到对于的环境变量参数，如果你有更多的环境需要配置，再新增所需的环境env文件和启动命令进行修改.

vite配置

这里是一些vite的配置和优化

resolve.alias

常用的一些例如src等引用别名

import path from 'path'
resolve: {
    alias: {
      '@': path.resolve(__dirname, './src') // 路径的别名
    }
  }

resolve.extensions

常用的一些文件拓展名省略

resolve: {
    extensions: ['.js', '.ts', '.json'], // 导入时省略的扩展名列表
    alias: {
      '@': path.resolve(__dirname, './src') // 路径的别名
    }
  }

server.host

指定服务器监听的IP地址。默认是为localhost，只会监听本地的127.0.0.1。开发移动端或需要通过局域网访问是，可以将host设置为true或0.0.0.0，这样服务器就会监听所有地址，包括局域网和公网地址。

server: {
    host: true // or `0.0.0.0`
}

server.proxy

本地http等请求的代码，和webpack基本一致

proxy: {
        '/api': {
          target: 'http://192.168.1.1:9100',
          changeOrigin: true
          //rewrite: (path) => path.replace(/^\/api/, '')
        }
}

还有一些例如server.port指定服务器端口，open启动时自动打开应用不一一列举了，可以在vite配置文档中查看.

base

开发或生产环境服务的公共基础路径配置

base: '/home/' // 开发或生产环境服务的公共基础路径，配置后项目启动路径为`http://localhost:5173/home/`

build.outdir

打包时的文件输出目录。默认是为dist，可以在dist被占用或有统一命名规范时，进行修改.

build: {
    assetsDir: 'build' // 打包的文件的输出目录
  }

build.assetsDir

打包时的指定生成静态资源的目录。默认是为assets，根据自身情况进行调整.

 build: {
    assetsDir: 'static' // 静态资源目录
  }

build.minify

对生产环境的console和debugger进行移除.

build: {
        minify: 'terser',
        terserOptions: {
            compress: {
                //生产环境时移除console
                drop_console: true,
                drop_debugger: true,
            },
        },
    }

build.assetsInlineLimit

将较小的图片转成base64，通过设置阈值对图片进行base64格式转换.

build: {
    assetsInlineLimit: 4096 // 图片大小，kb
  }

结语

以上就是我在使用vite时使用的一些配置，还有我学习vite时了解到的一些用法和插件，在一些中大型项目中，webpack已经比不上vite了，比如我司的一些项目，所有的webpack优化全部用上了，但是还是在启动与热更新上花的时间很长，vite的优点太多太多了，随便列举一个点，例如我司的中大型项目中，如果需要更换api环境与同时对接，我们的前端项目启动需要1-2分钟，修改vue.config.js后需要重启vue项目才能生效，而vite会帮你自动重启server服务，启动快，热更新快，这也导致了我不再关注webpack投入vite的怀抱的原因.

声明：Web前端小站 - 前端博客|版权所有，违者必究|如未注明，均为原创|本网站采用BY-NC-SA协议进行授权

转载：转载请注明原文链接 - 写给自己看的vite配置

行路有良友，便是捷径。带上我吧，一起去看更大的世界。